![2033dfcdd27df27513eed31faf823f83.png](https://i-blog.csdnimg.cn/blog_migrate/fa32a0e97a7e95bc961cf211f4baa414.jpeg)
CSS3跟大家见面已经有些年头了,都很熟悉,各种高级属性随口就来,但是,如果冷不丁让你实现一个效果,可能并没那么快想出实现方案——一用就想不起来,说的是不是你?~
字体样式
我们知道,CSS中设置字体常用的属性,无非是
- font-size
- color
- font-weight等,
比如下面一段代码:
<
我们把它设置为红色,只需要这样:
.
效果如下:
![223f127c76b062e76c8eac22cddda1fe.png](https://i-blog.csdnimg.cn/blog_migrate/22f7e635e79c8170fc06ef39899ba499.jpeg)
你会觉得,这简单得简直侮辱智商,那么问题来了:
怎么让它一半红一半绿呢?
color…似乎无能为力。
打破思维的墙
为了实现以上效果,我们总不能去绘制,没必要,也不能把A拆成两半,一左一右,然后分别设置color吧,你拆一个看看?
但总能想到办法,就像以前模拟三角形或者牛角那样。
我们来分拆:
从一个颜色到另一个颜色,怎么实现?——渐变。
一半红,一半绿呢?起点到中点是一个颜色,中点到终点是另外一个颜色即可。
颜色解决了,文字呢?我们的主角要登场了。
background-clip
废话不多说,直接亮代码:
.
效果如下:
![65c747396e06ddef98643ba00a5be952.png](https://i-blog.csdnimg.cn/blog_migrate/93081f820709b352b911d7dc39de593f.jpeg)
可以看到,上面的代码里,我标了两处”关键“,是因为除了这两个地方,其他均可变,只是视觉效果不同,而这两者是必须的。
看到这里,你突然觉得,也不难啊,的确不难,这个问题只是将我们思考问题的维度缩小了,以至于忘了本来可能熟悉的东西,例如,我们通常会实现这样的效果:
<
![f6d9ad83bc80c3c153685d22c8f83116.png](https://i-blog.csdnimg.cn/blog_migrate/499ceb6d52121f91503fb597b9cca8b0.jpeg)
是不是焕然大悟?变一种形式可能那个弯儿就转不过来了。
小tips:上面代码我都加了display:inline-block;为什么,不加不行?不是,这关乎一个细节,很多时候,如果你用一个块元素直接包裹,它会撑满整行,那么渐变的背景也会撑满整行,而文字可能只占了它的一个片段,多数情况下,都会跟想要的视觉效果有差别,故而,我们需要渐变的区域和文字区域完全重合。
常规应用
”text“这个值虽然神奇,但只能算是它带给我们的奖励,它还有三个常规的值:
background-clip: border-box|padding-box|content-box;
拿一张图片举例,它们分别对应的效果如下:
.
![481ee915f71a76e51e171a5d749bce73.png](https://i-blog.csdnimg.cn/blog_migrate/a6b91d38758fe933202239c57e2f96d4.jpeg)
![e80d784f13775d4e6601074ccd7a9026.png](https://i-blog.csdnimg.cn/blog_migrate/5dfe95bd17b2e2eef9c2b212152d8422.jpeg)
![1eb3a0dd6f47072f21cc549a732a64ab.png](https://i-blog.csdnimg.cn/blog_migrate/64e7faff05334204d5c7842d2ea5039b.jpeg)
可看出,属性值代表的意思——即背景图可以延展到的范围。
小结
关于background-clip就先聊到这儿,它可能远不止我们聊的这些看起来普通的应用,更重要的,是需要它们派上用场的时候,我们能够想到,祝我们好运!~
本文首发于个人博客:CSS3高级属性巡礼—一半红一半绿
欢迎关注个人公众号——灵感周末,每个周末推送优质好文~
![3be5dd11198ab128b937489858510f0d.png](https://i-blog.csdnimg.cn/blog_migrate/26c3e1d59a9c4ebe18e0d54b251dbfd7.png)