【Css】你会写花里胡哨的文字吗？

设计师有没有给你过这样霸气的设计？

霸气外漏

怎么办？怎么写？一个个要图片？No_NoNo~会被鄙视的！

来，让咱们看一个关于背景的属性~background-clip

• 语法
  background-clip:[,]*
  = border-box | padding-box | content-box | text
  默认值：border-box
  适用于：所有元素
  继承性：无
  动画性：否
  计算值：指定值

• 取值
  padding-box:从padding区域(不含padding)开始向外裁剪背景
  border-box:从border区域(不含border)开始向外裁剪背景
  content-box:从content区域开始向外裁剪背景
  text:从前景内容的形状(比如文字)作为裁剪区域向外裁剪，如此即可实现使用背景作为填充色之类的遮罩效果。

• 说明
  指定对象的背景图像向外裁剪的区域。
  对应的脚本特性为backgroundClip。

• 兼容性
  text属性值，目前为webkit only
  

  兼容性

• 示例
  1.border-box

如下图，可以理解为将border区域也用背景图片进行填充

border-box

2.padding-box

将整个padding+content区域都用背景进行填充，这个和content-box进行对比会比较清晰。

padding-box

3. content-box

只填充content部分，不考虑padding和border

content-box

4. text

霸气外漏

设置文字遮罩的效果就是这么简单啦~But，很遗憾的是，不是所有浏览器都支持...

霸气外漏