CSS3高级属性巡礼—一半红一半绿

CSS3跟你们见面已经有些年头了，都很熟悉，各类高级属性随口就来，可是，若是冷不丁让你实现一个效果，可能并没那么快想出实现方案——一用就想不起来，说的是否是你？~

字体样式

咱们知道，CSS中设置字体经常使用的属性，无非是

• font-size
• color
• font-weight等，

好比下面一段代码：

<div class="test-box">
         <h2>A</h2>
    </div>
复制代码

咱们把它设置为红色，只须要这样：

.test-box h2{
            color:red;
    }
复制代码

效果以下：

你会以为，这简单得简直侮辱智商，那么问题来了：

怎么让它一半红一半绿呢？

color...彷佛无能为力。

打破思惟的墙

为了实现以上效果，咱们总不能去绘制，不必，也不能把A拆成两半，一左一右，而后分别设置color吧，你拆一个看看？

但总能想到办法，就像之前模拟三角形或者牛角那样。

咱们来分拆：

从一个颜色到另外一个颜色，怎么实现？——渐变。 一半红，一半绿呢？起点到中点是一个颜色，中点到终点是另一个颜色便可。 颜色解决了，文字呢？咱们的主角要登场了。

background-clip

废话很少说，直接亮代码：

.test-box h2{
        display: inline-block;
        background: linear-gradient(to right, #f44e30 0%,#f44e30 50%,#29db35 51%,#29db35 100%); 
        color: transparent; //关键
        font-size: 20px;
        -webkit-background-clip: text;  //关键
    }
复制代码

效果以下：

能够看到，上面的代码里，我标了两处”关键“，是由于除了这两个地方，其余都可变，只是视觉效果不一样，而这二者是必须的。

看到这里，你忽然以为，也不难啊，的确不难，这个问题只是将咱们思考问题的维度缩小了，以致于忘了原本可能熟悉的东西，例如，咱们一般会实现这样的效果：

<div class="test-box">
         <h2>Hello world</h2>
    </div>

    .test-box h2{
        display:inline-block;
        font-size:40px;
        background: linear-gradient(to bottom, #f44e30 0%,#29db35 100%); 
        -webkit-background-clip:text;
        -webkit-text-fill-color:transparent;
    }
复制代码

变一种形式可能那个弯儿就转不过来了。

小tips：上面代码我都加了display:inline-block;为何，不加不行？不是，这关乎一个细节，不少时候，若是你用一个块元素直接包裹，它会撑满整行，那么渐变的背景也会撑满整行，而文字可能只占了它的一个片断，多数状况下，都会跟想要的视觉效果有差异，故而，咱们须要渐变的区域和文字区域彻底重合。

常规应用

”text“这个值虽然神奇，但只能算是它带给咱们的奖励，它还有三个常规的值：

background-clip: border-box|padding-box|content-box;
复制代码

拿一张图片举例，它们分别对应的效果以下：

.img-clip{
            width: 80px;
            height: 80px;
            background: url(98.jpg);           
            background-repeat: no-repeat;
            background-size: cover;
            border:10px solid rgba(207, 56, 56, 0.3);
            padding: 20px;
    }
复制代码

可看出，属性值表明的意思——即背景图能够延展到的范围。

小结

关于background-clip就先聊到这儿，它可能远不止咱们聊的这些看起来普通的应用，更重要的，是须要它们派上用场的时候，咱们可以想到，祝咱们好运！~

首发于我的博客： CSS3高级属性巡礼—一半红一半绿

欢迎关注我的公众号——灵感周末：

每一个周末推送好文哦！~