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高級屬性巡禮—一半紅一半綠

歡迎關注我的公衆號——靈感週末：

每一個週末推送好文哦！~