background-clip

語法:

background-clip<box> [ , <box> ]*

<box> = border-box | padding-box | content-box | text

預設值border-box

適用於:所有元素

繼承性:無

動畫性:否

計算值:指定值

媒 體:視覺

取值:

border-box:
從border區域(含border)開始向外裁剪背景。
padding-box:
從padding區域(含padding)開始向外裁剪背景。
content-box:
從content區域開始向外裁剪背景。
text:
從前景內容的形狀(比如文字)作為裁剪區域向外裁剪,如此即可實現使用背景作為填充色之類的遮罩效果。遮罩效果 See with Webkit

說明:

指定物件的背景圖片向外裁剪的區域。
  • 對應的腳本特性為:backgroundClip

兼容性:

  • 淺綠 = 支援
  • 紅色 = 不支援
  • 粉色 = 部分支援
Values IE Firefox Chrome Safari Opera iOS Safari Android Browser Android Chrome
Basic Support 8.0 40.0 40.0+ 8.0+ 40.0+ 8.0+ 4.4+ 28.0+
9.0+
Multiple background clip 8.0
9.0+
text #1 8.0-16.0 2.0-48.0
49.0+
  1. text屬性值,目前為webkit only [1] [2],使用方式:-webkit-background-clip: text

示例: