抱歉標(biāo)題黨了 :P。
情人節(jié)，筆者雖然有代碼的陪伴（www），但是還是有些寂寞（sad）就跑來發(fā)文了，原文在自己自娛自樂的博客 imo++ 上，在線 demo 可以戳這里。
其實(shí)嚴(yán)格意義上并沒有九種那么多，因?yàn)楹脦追N實(shí)現(xiàn)的思路是一樣的 Orz。關(guān)鍵詞有：
- 偽元素
- border 畫三角（甚至扇形）
- 漸變——linear-gradient 和 radial-gradient
- SVG
實(shí)現(xiàn)過程中遇到了幾個(gè)問題：
-
層疊上下文
- 問題&原因：為了使
position: absolute;的偽元素不會(huì)遮擋文字而設(shè)置了z-index: -1;，但根據(jù) 層疊規(guī)則（stack order） ，此時(shí)偽元素處于所在父元素（一個(gè)li元素，即一個(gè)“block 塊狀水平盒子”）之下，即此時(shí)偽元素被有背景色的父元素遮擋了！
中的 *層疊規(guī)則（stack order）* 示例圖（局部）](http://image.zhangxinxu.com/image/blog/201601/2016-01-08_235511.png)
[張?chǎng)涡翊笊裣嚓P(guān)博客](http://www.zhangxinxu.com/wordpress/2016/01/understand-css-stacking-context-order-z-index/)中的 *層疊規(guī)則（stack order）* 示例圖（局部）- 解決方案：對(duì)父元素設(shè)置
display: flex;的同時(shí)對(duì)偽元素所在div設(shè)置z-index: 0;（只要設(shè)置一個(gè)非負(fù)數(shù)值即可，這里的主要目的是使該div成為一個(gè)層疊上下文元素）。
- 問題&原因：為了使
-
SVG 中 text 的居中
- 解決方案：見文末女神 Lea Verou 的文章
參考資料：
深入理解 CSS 中的層疊上下文和層疊順序 by 張?chǎng)涡?/a>
Easily center text vertically, with SVG! by Lea Verou
P.S. 歡迎來留下第一個(gè)評(píng)論（比心）
