HTML中各种花里胡哨的效果,【Css】你会写花里胡哨的文字吗？

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

霸气外漏

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

来，让咱们看一个关于背景的属性~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

/* css */

#box{

width:100px;

height: 100px;

border:20px dashed #ad160b;

padding: 30px;

background:url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1547122821339&di=e28b725cddbecf688cb827c96f726ab0&imgtype=0&src=http%3A%2F%2Fpic.51yuansu.com%2Fpic%2Fcover%2F00%2F24%2F02%2F57e3203eb1eb3_610.jpg);

background-position: center;

background-clip:border-box;

}

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

border-box

2.padding-box

/* css */

#box{

width:100px;

height: 100px;

border:20px dashed #ad160b;

padding: 30px;

background:url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1547122821339&di=e28b725cddbecf688cb827c96f726ab0&imgtype=0&src=http%3A%2F%2Fpic.51yuansu.com%2Fpic%2Fcover%2F00%2F24%2F02%2F57e3203eb1eb3_610.jpg);

background-position: center;

background-clip:padding-box;

}

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

padding-box

content-box

/* css */

#box{

width:100px;

height: 100px;

border:20px dashed #ad160b;

padding: 30px;

background:url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1547122821339&di=e28b725cddbecf688cb827c96f726ab0&imgtype=0&src=http%3A%2F%2Fpic.51yuansu.com%2Fpic%2Fcover%2F00%2F24%2F02%2F57e3203eb1eb3_610.jpg);

background-position: center;

background-clip: content-box;

}

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

content-box

text

/* css */

#box{

width: auto;

font-size:120px;

font-weight:bold;

text-align: center;

background:url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1547122821339&di=e28b725cddbecf688cb827c96f726ab0&imgtype=0&src=http%3A%2F%2Fpic.51yuansu.com%2Fpic%2Fcover%2F00%2F24%2F02%2F57e3203eb1eb3_610.jpg) repeat;

-webkit-background-clip:text; /* 注意这里 */

-webkit-text-fill-color:transparent; /* 注意这里 */

}

霸气外漏

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

霸气外漏