興趣使然，突然看見(jiàn)網(wǎng)上的一些帶有描邊的字體，覺(jué)得有點(diǎn)意思，便嘗試去做了下

　　不是什么很厲害的技巧，當(dāng)然也有參考張?chǎng)涡翊笊駥懙奈恼?/p>

　　只能感嘆，css的世界還很大，很廣闊

　　直入主題：

　　對(duì)于文字的描邊，一般都會(huì)想到-webkit-text-stroke去描邊（抱歉我是百度的，我給大家丟臉了）

　　但是這樣直接寫的話，會(huì)出現(xiàn)一個(gè)問(wèn)題就是描邊的寬度，如果設(shè)置的稍大一點(diǎn)，你會(huì)發(fā)現(xiàn)字體原本的顏色就消失了

　　關(guān)于這點(diǎn)，張?chǎng)涡駥懙囊黄恼轮杏性敿?xì)講到

　　https://www.zhangxinxu.com/wordpress/2017/06/webkit-text-stroke-css-text-shadow/

　　原理就是這個(gè)描邊是屬于居中描邊的：

　　什么意思？就是說(shuō)這個(gè)描邊是從字體的外邊框，同時(shí)向外和向內(nèi)描邊的

　　像這樣：

　　

　　外描邊還好，但是內(nèi)描邊就會(huì)覆蓋掉原本文字的顏色，這樣就會(huì)導(dǎo)致原本字體會(huì)被覆蓋掉（當(dāng)然視情況而定，如果剛好需要這樣的效果當(dāng)我沒(méi)說(shuō)）

　　所以對(duì)于這種情況就利用重疊描邊

　　css代碼如下：

　　

.nickname {text-align: center;font-size: 0.587rem;font-weight: 700;color: #3c3c3c;margin-top: 0.32rem;position: relative;z-index: 0; } .nickname::before {content: '想要重疊的文字';position: absolute;z-index: -1;-webkit-text-stroke: 0.15rem #fff; }

　　原理就是將原文本設(shè)置定位，層級(jí)提高，然后利用偽元素進(jìn)行描邊，最后重合在一起

　　這樣就相當(dāng)于實(shí)現(xiàn)了 —— 外描邊

　　效果大概長(zhǎng)這樣：

　　

　　當(dāng)作是個(gè)小技巧吧！

?

轉(zhuǎn)載于:https://www.cnblogs.com/weilaiz/p/9756274.html

總結(jié)

以上是生活随笔為你收集整理的CSS中的字体描边的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。