九色国产,午夜在线视频,新黄色网址,九九色综合,天天做夜夜做久久做狠狠,天天躁夜夜躁狠狠躁2021a,久久不卡一区二区三区

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

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

當然，我作為一個非專業(yè)的前端設計師，以上效果也是經若干次Google后總結得出。

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

實現(xiàn)三角形之前，我們用CSS實現(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都設為0，會出現(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個三角形，而氣泡只需要一個！怎么辦？把不需要的邊框設置為透明：

代碼：

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

三角形初步完成！

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

代碼：

<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>

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

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

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

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

<div class="box"><div class="triangle-1"></div><div class="triangle-2"></div><div class="box-content">提示內容...</div></div>

大功告成！

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

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

哈哈，用了特殊字符“◆”，很明顯沒有我們的實現(xiàn)好，因為字符樣式是固定的，而我們的三角可以調尖角！至于怎么調，把上下左右的border-width設置成不一樣的寬度看看就知道了。