css中怎么给字体描边,教你css实现文字描边

解决方法一

首先想到去看CSS3有没有什么属性可以实现，后来被我找到了text-stroke

该属性是一个复合属性，可以设置文字宽度和文字描边颜色

该属性使用很简单：text-stroke:1px #f00;(1px是描边的宽度，#ff是文字描边颜色)

本以为该属性的兼容性会及时止住我微微上扬的嘴角，随后逐渐凝固

但出乎意料的是大多浏览器已经开始支持该属性，只需要加上前缀-webkit-即可

注意：ie，及许多浏览器不支持给方法。

text-stroke-文字描边

.div {

color: mistyrose;

text-align: center;

font-family: Verdana;

font-size: 30px;

font-weight: bold;

.p2 (

-webkit-text-stroke: 1px greenyellow;

3tyle>

没有添加描边

添加了 字体描边

解决方法二(推荐)

偶然间发现一种即使不用text-stroke属性也能够实现文字描边的方法——text-shadow

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

该方法除了le：6-9及firefox不支持外其他大都支持使用

text-shadow-文字描边

.div {

text-align: center;

font- family: Verdana;

font-size: 30px;

font-weight: bold;

color: red;

.pp2 {

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

没有添加描边

添加了字体描边