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

　　不是什么很厲害的技巧，當(dāng)然也有參考張鑫旭大神寫的文章

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

　　直入主題：

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

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

　　關(guān)于這點，張鑫旭寫的一篇文章中有詳細(xì)講到

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

　　原理就是這個描邊是屬于居中描邊的：

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

　　像這樣：

　　

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

　　所以對于這種情況就利用重疊描邊

　　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ìn)行描邊，最后重合在一起

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

　　效果大概長這樣：

　　

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

?

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

總結(jié)

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

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