CSS3聊天氣泡框以及inherit、currentColor關鍵字

聊天氣泡框

效果如上圖所示，主要用到CSS3的偽類::after、::before，以及圓角邊框border-radius屬性。對於下面的氣泡框，可以有兩種方式實現小三角：

• 傳統方式，利用CSS畫小三角，利用到了透明背景和邊框屬性transparent的應用。

• CSS3的transform屬性的使用

然後透過position定位到合適的位置。

此外，本文還會講一下CSS的inherit屬性值的知識。

實現氣泡框

HTML結果也很簡單，就一個DIV。下三角部分使用了CSS畫三角的知識，
HTML：

    Demos 程式碼演示、程式碼片段 - 讀你，歡迎來到讀你，
 

    Demos 程式碼演示、程式碼片段 - 讀你，歡迎來到讀你，

CSS：

.message1,.message2 {    width: 200px;    height: 80px;    margin: 100px auto;    background-color: green;    border-bottom-color:green;/*為了給after偽元素自動繼承*/
    color: #fff;    font-size: 12px;    font-family: Arial;    line-height: 18px;    padding: 5px 12px 5px 12px;    box-sizing: border-box;    border-radius: 6px;    position: relative;    word-break: break-all;
}.message1::after {    content: '';    position: absolute;    top: 0;    right: -24px;    width: 20px;    height: 20px;    border-width: 0 0 20px 20px;    border-style: solid;    border-bottom-color: inherit;   /*自動繼承父元素的border-bottom-color*/
    border-left-color: transparent;    border-radius: 0 0 60px 0;
}/** 透過對小正方形旋轉45度解決 **/.message2::before {    content: '';    position: absolute;    top: 50%;    left: -5px;    width: 10px;    height: 10px;    margin-top: -10px;    background: inherit;/*自動繼承父元素的背景*/
    transform: rotate(45deg);
}/** 透過畫三角形解決 *//*.message2::before {*/
    /*content: '';*/
    /*position: absolute;*/
    /*top: 50%;*/
    /*left: -20px;*/
    /*width: 0px;*/
    /*height: 0px;*/
    /*margin-top: -10px;*/
    /*border-width: 10px;*/
    /*border-style: solid;*/
    /*border-color: transparent green transparent transparent;*//*}*/

以上就是全部程式碼。
上面對小正方形使用了inherit屬性值，透過把正方形旋轉45度形成對外的三角而得到。

被刻意遺忘的inherit關鍵字

儘管絕大多數人都知道inherit這個關鍵字，但是很多人可能自始自終都沒實際用過它，包括我自己，從來沒有，在查詢CSS文件時，習慣性的忽略它，直到看到《CSS揭秘》這本書。

inherit可以用在任何CSS屬性中，這從w3cschool文件中就已經體現了，它總是繫結到父元素的計算值（對偽元素來說，則會取生成該偽元素的宿主元素）。舉例來說，要把表單元素的字型設定為與頁面的其他部分相同，你並不需要重複指定字型屬性，只需要利用inherit的特性即可：

input,select,button { font: inherit }

與此類似，要把超連結的顏色設定為與頁面中其他文字相同，還是要用inherir，比如下面的程式碼：
HTML：

    
Demos 程式碼演示、程式碼片段 - 讀你 | 這世間唯有夢想和好姑娘不可辜負!
    

CSS：

.article {      font-family: "Microsoft YaHei";      font-size: 14px;      color: red;
}

效果：

2.png

此時文字的顏色是紅色，而超連結預設是藍色，並不會被改變，這是我們都知道的，那麼我想讓超連結也是跟父元素一樣的紅色呢？此時我們只需要給超連結inherit即可：

.article a { color: inherit; }

效果：

3.png

這個inherit對於背景色相同非常有用，但是需要注意的是，想要子元素設定屬性的inherit關鍵字生效，父元素必須設定過使用inherit為值的屬性。

CSS3的currentColor關鍵字

與之類似的還有一個新的CSS顏色屬性：currentColor。這個屬性是在CSS顏色（第三版）規範中新增加的，它是從SVG那裡借鑑過來的，這個關鍵字並沒有繫結到一個固定的顏色值，而是一直被解析為color。實際上，這是CSS中有史以來第一個變數，雖然功能很有限，但它真的是個變數。

舉個例子，假如我們想讓所有的水平分割線（所有

---

元素）自動與文字顏色保持一致。

例如在上面的例子中新增水平線：

.article hr {      height: .5em;
}

預設情況下是這樣的：

4.png

此時，新增 currentColor

.article hr {      height: .5em;      background: currentColor;
}

效果：

5.png

當我在把文字顏色設為藍色的時候，它們會保持跟文字顏色一致

---

參考資料：
《CSS解密》[美]Lea Verou (作者) ，[中]CSS魔法 (譯者)，圖靈教育，人民有點出版社

作者：Dunizb
連結：