100字范文,内容丰富有趣,生活中的好帮手!
100字范文 > css中怎么给字体描边 教你css实现文字描边

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

时间:2022-11-14 21:24:45

相关推荐

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;

没有添加描边

添加了字体描边

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。