效果如上圖所示,主要用到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這個關鍵字,可是不少人可能自始自終都沒實際用過它,包括我本身,歷來沒有,在查詢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; }
效果:
此時文字的顏色是紅色,而超連接默認是藍色,並不會被改變,這是咱們都知道的,那麼我想讓超連接也是跟父元素同樣的紅色呢?此時咱們只須要給超連接inherit便可:
.article a { color: inherit; }
效果:
這個inherit對於背景色相同很是有用,可是須要注意的是,想要子元素設置屬性的inherit關鍵字生效,父元素必須設置過使用inherit爲值的屬性。
與之相似的還有一個新的CSS顏色屬性:currentColor
。這個屬性是在CSS顏色(第三版)規範中新增長的,它是從SVG那裏借鑑過來的,這個關鍵字並無綁定到一個固定的顏色值,而是一直被解析爲color。實際上,這是CSS中有史以來第一個變量,雖然功能頗有限,但它真的是個變量。
舉個例子,假如咱們想讓全部的水平分割線(全部<hr>
元素)自動與文本顏色保持一致。
例如在上面的例子中添加水平線:
.article hr { height: .5em; }
默認狀況下是這樣的:
此時,添加 currentColor
.article hr { height: .5em; background: currentColor; }
效果:
當我在把文字顏色設爲藍色的時候,它們會保持跟文字顏色一致
參考資料:《CSS解密》[美]Lea Verou (做者) ,[中]CSS魔法 (譯者),圖靈教育,人民有點出版社