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;
text align centerfont-weight: bold;
color: red;
.pp2 {
text-shadow: #000 1px 0 0,#000 0 1px 0,#000 -1px 0 0,#000 0 -1px 0;
没有添加描边

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。