資訊專欄INFORMATION COLUMN
摘要：效果如上圖所示，主要用到的偽類，以及圓角邊框屬性。的屬性的使用然后通過定位到合適的位置。實現氣泡框結果也很簡單，就一個。的關鍵字與之類似的還有一個新的顏色屬性。實際上，這是中有史以來第一個變量，雖然功能很有限，但它真的是個變量。
效果如上圖所示，主要用到CSS3的偽類::after、::before，以及圓角邊框border-radius屬性。對于下面的氣泡框，可以有兩種方式實現小三角：
傳統方式，利用CSS畫小三角，利用到了透明背景和邊框屬性transparent的應用。
CSS3的transform屬性的使用
然后通過position定位到合適的位置。
此外，本文還會講一下CSS的inherit屬性值的知識。
實現氣泡框HTML結果也很簡單，就一個DIV。下三角部分使用了CSS畫三角的知識，
HTML：
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這個關鍵字，但是很多人可能自始自終都沒實際用過它，包括我自己，從來沒有，在查詢CSS文檔時，習慣性的忽略它，直到看到《CSS揭秘》這本書。
inherit可以用在任何CSS屬性中，這從w3cschool文檔中就已經體現了，它總是綁定到父元素的計算值（對偽元素來說，則會取生成該偽元素的宿主元素）。舉例來說，要把表單元素的字體設定為與頁面的其他部分相同，你并不需要重復指定字體屬性，只需要利用inherit的特性即可：
input,select,button { font: inherit }
與此類似，要把超鏈接的顏色設定為與頁面中其他文本相同，還是要用inherir，比如下面的代碼：
HTML：
???Demos 代碼演示、代碼片段 - 讀你 | 這世間唯有夢想和好姑娘不可辜負!
??? Demos
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中有史以來第一個變量，雖然功能很有限，但它真的是個變量。
舉個例子，假如我們想讓所有的水平分割線（所有
元素）自動與文本顏色保持一致。
例如在上面的例子中添加水平線：
.article hr {
? ? ? height: .5em;
}
默認情況下是這樣的：
?此時，添加?currentColor
.article hr {
? ? ? height: .5em;
? ? ??background: currentColor;
}
效果：
當我在把文字顏色設為藍色的時候，它們會保持跟文字顏色一致
更多CSS3邊框特效，請查看該頁面
?
參考資料：
《CSS解密》[美]Lea Verou (作者) ，[中]CSS魔法 (譯者)，圖靈教育，人民有點出版社
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/111378.html
摘要：效果如上圖所示，主要用到的偽類，以及圓角邊框屬性。的屬性的使用然后通過定位到合適的位置。實現氣泡框結果也很簡單，就一個。的關鍵字與之類似的還有一個新的顏色屬性。實際上，這是中有史以來第一個變量，雖然功能很有限，但它真的是個變量。 showImg(https://segmentfault.com/img/remote/1460000010869212);效果如上圖所示，主要用到CSS3的...
摘要：正在暑假中的課多周刊第期我們的微信公眾號，更多精彩內容皆在微信公眾號，歡迎關注。若有幫助，請把課多周刊推薦給你的朋友，你的支持是我們最大的動力。原理微信熱更新方案漲知識了，熱更新是以后的標配。 正在暑假中的《課多周刊》(第1期) 我們的微信公眾號：fed-talk，更多精彩內容皆在微信公眾號，歡迎關注。 若有幫助，請把 課多周刊 推薦給你的朋友，你的支持是我們最大的動力。 遠上寒山石徑...
摘要：正在暑假中的課多周刊第期我們的微信公眾號，更多精彩內容皆在微信公眾號，歡迎關注。若有幫助，請把課多周刊推薦給你的朋友，你的支持是我們最大的動力。原理微信熱更新方案漲知識了，熱更新是以后的標配。 正在暑假中的《課多周刊》(第1期) 我們的微信公眾號：fed-talk，更多精彩內容皆在微信公眾號，歡迎關注。 若有幫助，請把 課多周刊 推薦給你的朋友，你的支持是我們最大的動力。 遠上寒山石徑...
摘要：想必大家都知道，這里不贅述，聊一聊其他實現方法。這里的三角形部分可以使用正方形代替，實現同樣效果，方法就是旋轉小正方形使其一部分露在外面。 showImg(https://segmentfault.com/img/bVEcKn?w=4136&h=1956); 前一陣子敢玩的 Mobile 頁改版完成了，就之前的頁面風格更加扁平化，從暗色系為主背景轉到亮色背景，去掉更多的陰影，給用戶簡約...
閱讀 2676·2023-04-25 20:19
閱讀 1930·2021-11-24 09:38
閱讀 1632·2021-11-16 11:44
閱讀 4341·2021-09-02 15:40
閱讀 1317·2019-08-30 15:55
閱讀 2022·2019-08-30 15:52
閱讀 3759·2019-08-29 17:20
閱讀 2247·2019-08-29 13:48
