当前位置:龙哥网 > 网络技术 > 使用CSS text-shadow实现文字描边效果的代码

使用CSS text-shadow实现文字描边效果的代码

longge5个月前 (12-17)网络技术89

通过 text-shadow 属性水平、垂直阴影的偏移值可以实现文字的描边效果,兼容 chrome 4.0+、IE10+、Firefox 3.5+、Safari 4.0+、Opera 9.6+ 浏览器,加上私有属性前缀,可能兼容的版本还可以提高,不过我没有测试。

网页效果:

WWW.NEIRONG.ORG

CSS:

-o-text-shadow: 1px 0px 0px #f00, 0px 1px 0px #f00, -1px 0px 0px #f00, 0px -1px 0px #f00; color:#fff; 
-ms-text-shadow: 1px 0px 0px #f00, 0px 1px 0px #f00, -1px 0px 0px #f00, 0px -1px 0px #f00; color:#fff; 
-moz-text-shadow: 1px 0px 0px #f00, 0px 1px 0px #f00, -1px 0px 0px #f00, 0px -1px 0px #f00; color:#fff; 
-webkit-text-shadow: 1px 0px 0px #f00, 0px 1px 0px #f00, -1px 0px 0px #f00, 0px -1px 0px #f00; color:#fff; 
text-shadow: 1px 0px 0px #f00, 0px 1px 0px #f00, -1px 0px 0px #f00, 0px -1px 0px #f00; 
color:#fff; 
font-size:28px; 
line-height:2em;

这个方法有一个缺陷,就是边线大于1px时,直角位置会有缺口,想要更好的效果,可以考虑 text-stroke 属性,但是兼容性较差,IE全系列好像都不支持。

免责声明
本站部分资源来源于互联网 如有侵权 请联系站长删除
龙哥网是优质的互联网科技创业资源_行业项目分享_网络知识引流变现方法的平台为广大网友提供学习互联网相关知识_内容变现的方法。#转载请注明出处!