Webkit文字和背景效果_html/css_WEB-ITnose

-webkit-background-clip：padding-box | border-box | content-box | text，指定对象的背景图像向外裁剪的区域。对应的脚本特性为backgroundClip

padding-box

从padding区域（不含padding）开始向外裁剪背景。

border-box

从border区域（不含border）开始向外裁剪背景。

content-box

从content区域开始向外裁剪背景。

text

从前景内容的形状（比如文字）作为裁剪区域向外裁剪，如此即可实现使用背景作为填充色之类的遮罩或实现文字渐变的效果。

示例：

div{ font-size:40px; width:500px; margin:30px auto; text-align:center; border:5px solid #999; padding:10px;}.bgTest{background:-webkit-linear-gradient(top,#F00,#000);-webkit-background-clip:text;-webkit-text-fill-color:transparent;} 

背景测试 Background Test

      
查看更多关于Webkit文字和背景效果_html/css_WEB-ITnose的详细内容...
        

          
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://www.haodehen.cn/did109378