資訊專欄INFORMATION COLUMN
摘要：效果如上圖所示，主要用到的偽類，以及圓角邊框?qū)傩浴５膶傩缘氖褂萌缓笸ㄟ^定位到合適的位置。實現(xiàn)氣泡框結(jié)果也很簡單，就一個。的關(guān)鍵字與之類似的還有一個新的顏色屬性。實際上，這是中有史以來第一個變量，雖然功能很有限，但它真的是個變量。
效果如上圖所示，主要用到CSS3的偽類::after、::before，以及圓角邊框border-radius屬性。對于下面的氣泡框，可以有兩種方式實現(xiàn)小三角：
傳統(tǒng)方式，利用CSS畫小三角，利用到了透明背景和邊框?qū)傩?b>transparent的應(yīng)用。
CSS3的transform屬性的使用
然后通過position定位到合適的位置。
此外，本文還會講一下CSS的inherit屬性值的知識。
實現(xiàn)氣泡框HTML結(jié)果也很簡單，就一個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;
}
/** 通過對小正方形旋轉(zhuǎn)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屬性值，通過把正方形旋轉(zhuǎn)45度形成對外的三角而得到。
盡管絕大多數(shù)人都知道inherit這個關(guān)鍵字，但是很多人可能自始自終都沒實際用過它，包括我自己，從來沒有，在查詢CSS文檔時，習(xí)慣性的忽略它，直到看到《CSS揭秘》這本書。
inherit可以用在任何CSS屬性中，這從w3cschool文檔中就已經(jīng)體現(xiàn)了，它總是綁定到父元素的計算值（對偽元素來說，則會取生成該偽元素的宿主元素）。舉例來說，要把表單元素的字體設(shè)定為與頁面的其他部分相同，你并不需要重復(fù)指定字體屬性，只需要利用inherit的特性即可：
input,select,button { font: inherit }
與此類似，要把超鏈接的顏色設(shè)定為與頁面中其他文本相同，還是要用inherir，比如下面的代碼：
HTML：
???Demos 代碼演示、代碼片段 - 讀你 | 這世間唯有夢想和好姑娘不可辜負(fù)!
??? Demos
CSS：
.article {
? ? ? font-family: "Microsoft YaHei";
? ? ? font-size: 14px;
? ? ? color: red;
}
效果：
此時文字的顏色是紅色，而超鏈接默認(rèn)是藍(lán)色，并不會被改變，這是我們都知道的，那么我想讓超鏈接也是跟父元素一樣的紅色呢？此時我們只需要給超鏈接inherit即可：
.article a { color: inherit; }
效果：
這個inherit對于背景色相同非常有用，但是需要注意的是，想要子元素設(shè)置屬性的inherit關(guān)鍵字生效，父元素必須設(shè)置過使用inherit為值的屬性。
與之類似的還有一個新的CSS顏色屬性：currentColor。這個屬性是在CSS顏色（第三版）規(guī)范中新增加的，它是從SVG那里借鑒過來的，這個關(guān)鍵字并沒有綁定到一個固定的顏色值，而是一直被解析為color。實際上，這是CSS中有史以來第一個變量，雖然功能很有限，但它真的是個變量。
舉個例子，假如我們想讓所有的水平分割線（所有
元素）自動與文本顏色保持一致。
例如在上面的例子中添加水平線：
.article hr {
? ? ? height: .5em;
}
默認(rèn)情況下是這樣的：
?此時，添加?currentColor
.article hr {
? ? ? height: .5em;
? ? ??background: currentColor;
}
效果：
當(dāng)我在把文字顏色設(shè)為藍(lán)色的時候，它們會保持跟文字顏色一致
更多CSS3邊框特效，請查看該頁面
?
參考資料：
《CSS解密》[美]Lea Verou (作者) ，[中]CSS魔法 (譯者)，圖靈教育，人民有點出版社
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/49944.html
摘要：效果如上圖所示，主要用到的偽類，以及圓角邊框?qū)傩浴５膶傩缘氖褂萌缓笸ㄟ^定位到合適的位置。實現(xiàn)氣泡框結(jié)果也很簡單，就一個。的關(guān)鍵字與之類似的還有一個新的顏色屬性。實際上，這是中有史以來第一個變量，雖然功能很有限，但它真的是個變量。 showImg(https://segmentfault.com/img/remote/1460000010869212);效果如上圖所示，主要用到CSS3的...
摘要：正在暑假中的課多周刊第期我們的微信公眾號，更多精彩內(nèi)容皆在微信公眾號，歡迎關(guān)注。若有幫助，請把課多周刊推薦給你的朋友，你的支持是我們最大的動力。原理微信熱更新方案漲知識了，熱更新是以后的標(biāo)配。 正在暑假中的《課多周刊》(第1期) 我們的微信公眾號：fed-talk，更多精彩內(nèi)容皆在微信公眾號，歡迎關(guān)注。 若有幫助，請把 課多周刊 推薦給你的朋友，你的支持是我們最大的動力。 遠(yuǎn)上寒山石徑...
摘要：正在暑假中的課多周刊第期我們的微信公眾號，更多精彩內(nèi)容皆在微信公眾號，歡迎關(guān)注。若有幫助，請把課多周刊推薦給你的朋友，你的支持是我們最大的動力。原理微信熱更新方案漲知識了，熱更新是以后的標(biāo)配。 正在暑假中的《課多周刊》(第1期) 我們的微信公眾號：fed-talk，更多精彩內(nèi)容皆在微信公眾號，歡迎關(guān)注。 若有幫助，請把 課多周刊 推薦給你的朋友，你的支持是我們最大的動力。 遠(yuǎn)上寒山石徑...
摘要：想必大家都知道，這里不贅述，聊一聊其他實現(xiàn)方法。這里的三角形部分可以使用正方形代替，實現(xiàn)同樣效果，方法就是旋轉(zhuǎn)小正方形使其一部分露在外面。 showImg(https://segmentfault.com/img/bVEcKn?w=4136&h=1956); 前一陣子敢玩的 Mobile 頁改版完成了，就之前的頁面風(fēng)格更加扁平化，從暗色系為主背景轉(zhuǎn)到亮色背景，去掉更多的陰影，給用戶簡約...
閱讀 1993·2021-08-11 11:13
閱讀 1015·2021-07-25 21:37
閱讀 2577·2019-08-29 18:42
閱讀 2510·2019-08-26 12:18
閱讀 915·2019-08-26 11:29
閱讀 1684·2019-08-23 17:17
閱讀 2664·2019-08-23 15:55
閱讀 2599·2019-08-23 14:34
