常用CSS3效果:用text-shadow做CSS3 文字描边

思路:

利用CSS3的text-shadow属性,对文字的四个边均用阴影。

最终效果

单纯的为了实现效果。未作任何美化。

实现代码:

HTML:

<div>文字描边效果</div>

CSS:

div{
  text-shadow: 2px 0px 0px #fff,
         -2px 0px 0px #fff, 
         0px 2px 0px #000,
         0px -2px 0px #000;
  }

text-shadow属性

语法:

text-shadow : none | <length> none | [<shadow>, ] * <shadow> 或none | <color> [, <color> ]*

相关属性 : 无

取值:
<color> :
指定颜色。
<length> :
由浮点数字和单位标识符组成的长度值。可为负值。指定阴影的水平延伸距离。
<opacity> :
由浮点数字和单位标识符组成的长度值。不可为负值。 指定模糊效果的作用距离。如果你仅仅需要模糊效果,将前两个 length 全部设定为 0 。请参阅 长度单位。
说明:

设置或检索对象中文本的文字是否有阴影及模糊效果。可以设定多组效果,方式是用逗号隔开。可以被用于伪类 :first-letter 和 :first-line 。对应的脚本特性为 textShadow

 

兼容性:

text-shadow兼容除了IE系列的浏览器之外的Firefox3.5+以上的所有浏览器。。

另对IE也有兼容方法:http://www.cnblogs.com/leejersey/p/3278615.html

posted @ 2013-12-10 10:30  leejersey  阅读(34187)  评论(0编辑  收藏  举报