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

通过 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全系列好像都不支持。

如果您觉得上面的内容对您有帮助,可以打赏支持一下!

打赏

关键词: css css3