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