問題

最近遇到一個需求，需要實現(xiàn)文字的描邊效果，如下圖

解決方法一

首先想到去看CSS3有沒有什么屬性可以實現(xiàn)，后來被我找到了text-stroke

該屬性是一個復合屬性，可以設置文字寬度和文字描邊顏色

該屬性使用很簡單：text-stroke:1px#f00;(1px是文字寬度，#ff是文字描邊顏色)

本以為該屬性的兼容性會及時止住我微微上揚的嘴角，隨后逐漸凝固

但出乎意料的是大多瀏覽器已經(jīng)開始支持該屬性，只需要加上前綴-webkit-即可

Demo

text-stroke-文字描邊

.demo {

color: mistyrose;

text-align: center;

font-family: Verdana;

font-size: 30px;

font-weight: bold;

}

.stroke {

-webkit-text-stroke: 1px greenyellow;

}

沒有添加描邊

添加了字體描邊

解決方法二(推薦)

偶然間發(fā)現(xiàn)一種即使不用text-stroke屬性也能夠?qū)崿F(xiàn)文字描邊的方法—— text-shadow

并且text-shadow屬性的兼容性更好，也不用加前綴-webkit-

Demo

text-shadow-文字描邊

.demo {

text-align: center;

font-family: Verdana;

font-size: 30px;

font-weight: bold;

color: red;

}

.stroke {

text-shadow: #000 1px 0 0, #000 0 1px 0, #000 -1px 0 0, #000 0 -1px 0;

}

沒有添加描邊

添加了字體描邊

css 模擬文字描邊效果2

p{

text-shadow:

-1px -1px 0 #4f4d57,

1px -1px 0 #4f4d57,

-1px 1px 0 #4f4d57,

1px 1px 0 #4f4d57,

0px 2px 2px rgba(0,0,0,0.6);

font-size: 15px;

color: #f2f2f2;

font-family:"微軟雅黑";

}

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

總結(jié)

以上是生活随笔為你收集整理的html5中外描边怎么写,CSS3实现文字描边的2种方法(小结)的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

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