中文字幕理论片,69视频免费在线观看,亚洲成人app,国产1级毛片,刘涛最大尺度戏视频,欧美亚洲美女视频,2021韩国美女仙女屋vip视频

今天研究了純CSS實(shí)現(xiàn)的氣泡效果：

用小圖片實(shí)現(xiàn)氣泡效果不難，但圖片一費(fèi)流量，二難修改，改邊框顏色、大小均要重新生成圖片，一個(gè)普通的前端設(shè)計(jì)師和一個(gè)優(yōu)秀的前端設(shè)計(jì)師的差距就在這里：前者完成任務(wù)，后者追求極致。

當(dāng)然，我作為一個(gè)非專業(yè)的前端設(shè)計(jì)師，以上效果也是經(jīng)若干次Google后總結(jié)得出。

預(yù)備知識(shí)：用CSS實(shí)現(xiàn)三角形。

實(shí)現(xiàn)三角形之前，我們用CSS實(shí)現(xiàn)不同顏色的邊框：

代碼：

<div style="display:block;margin:10px;width:30px;height:30px;border-style:solid;border-width:20px;border-color:#f00 #00f #0f0 #f0f;background-color:#fff"></div>

把div的border加粗，四邊顏色不同，就出現(xiàn)了神奇的效果，每一邊都變成了梯形。

如果把div的width和height都設(shè)為0，會(huì)出現(xiàn)什么情況？

代碼：

<div style="display:block;margin:10px;width:0;height:0;border-style:solid;border-width:20px;border-color:#f00 #00f #0f0 #f0f;background-color:#fff"></div>

三角形出現(xiàn)了！

但是是4個(gè)三角形，而氣泡只需要一個(gè)！怎么辦？把不需要的邊框設(shè)置為透明：

代碼：

<div style="display:block;margin:10px;width:0;height:0;border-style:solid;border-width:20px;border-color:transparent #00f transparent transparent;"></div>

三角形初步完成！

但是氣泡的尖角不是三角形，而是斜線，怎么辦？也有辦法，找兩個(gè)三角形疊在一起，線條就出來了：

代碼：

<div style="position:relative;display:block;width:50px;height:50px;"><div style="display:block;position:absolute;left:10px;top:10px;width:0;height:0;border-style:solid;border-width:20px;border-color:transparent #00f transparent transparent;"></div><div style="display:block;position:absolute;left:16px;top:10px;;width:0;height:0;border-style:solid;border-width:20px;border-color:transparent #fff transparent transparent;"></div></div>

為了讓大家看清楚，兩個(gè)三角形距離為6px，如果把距離設(shè)為1px，那就是兩條細(xì)線了。

但是第二個(gè)三角是白色的，怎么辦？沒關(guān)系，我們假定氣泡的背景色是白色，第二個(gè)三角的顏色就正好融入背景色，如果氣泡的背景色是其他顏色，就把第二個(gè)三角設(shè)定成一樣的背景色。

同樣的道理，第一個(gè)三角的顏色要和氣泡的邊框色一致，通過相對(duì)定位，一個(gè)完美的氣泡就出現(xiàn)了！

最后一步，把樣式整理到CSS文件中，寫成簡(jiǎn)潔的形式：

<div class="box"><div class="triangle-1"></div><div class="triangle-2"></div><div class="box-content">提示內(nèi)容...</div></div>

大功告成！

如果氣泡的方向不是向左怎么辦？只要疊加出正確方向的三角就行。

最后看看新浪微博的轉(zhuǎn)發(fā)氣泡是如何實(shí)現(xiàn)的：

哈哈，用了特殊字符“◆”，很明顯沒有我們的實(shí)現(xiàn)好，因?yàn)樽址麡邮绞枪潭ǖ?，而我們的三角可以調(diào)尖角！至于怎么調(diào)，把上下左右的border-width設(shè)置成不一樣的寬度看看就知道了。