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

聊天氣泡框
效果如上圖所示,主要用到CSS3的僞類::after::before,以及圓角邊框border-radius屬性。對於下面的氣泡框,能夠有兩種方式實現小三角:css

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

  • CSS3的transform屬性的使用字體

而後經過position定位到合適的位置。url

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

實現氣泡框

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

<div class="message1">
    Demos 代碼演示、代碼片斷 - 讀你,歡迎來到讀你,http://dunizb.com
</div>
 
<div class="message2">
    Demos 代碼演示、代碼片斷 - 讀你,歡迎來到讀你,http://dunizb.com
</div>

CSS:orm

.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度造成對外的三角而獲得。htm

被刻意遺忘的inherit關鍵字

儘管絕大多數人都知道inherit這個關鍵字,可是不少人可能自始自終都沒實際用過它,包括我本身,歷來沒有,在查詢CSS文檔時,習慣性的忽略它,直到看到《CSS揭祕》這本書。繼承

inherit能夠用在任何CSS屬性中,這從w3cschool文檔中就已經體現了,它老是綁定到父元素的計算值(對僞元素來講,則會取生成該僞元素的宿主元素)。舉例來講,要把表單元素的字體設定爲與頁面的其餘部分相同,你並不須要重複指定字體屬性,只須要利用inherit的特性便可:rem

input,select,button { font: inherit }

與此相似,要把超連接的顏色設定爲與頁面中其餘文本相同,仍是要用inherir,好比下面的代碼:
HTML:

<div class="article">
    <p>Demos 代碼演示、代碼片斷 - 讀你 | 這世間惟有夢想和好姑娘不可辜負!</p>
    <a href="http://dunizb.com/demo/">Demos</a>
</div>

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中有史以來第一個變量,雖然功能頗有限,但它真的是個變量。

舉個例子,假如咱們想讓全部的水平分割線(全部<hr>元素)自動與文本顏色保持一致。

例如在上面的例子中添加水平線:

.article hr {
      height: .5em;
}

默認狀況下是這樣的:
4.png
 此時,添加 currentColor

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

效果:
5.png
當我在把文字顏色設爲藍色的時候,它們會保持跟文字顏色一致

更多CSS3邊框特效,請查看該頁面
 


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

相關文章
相關標籤/搜索