css3阴影效果

尚衍亮 2014-04-10

元素阴影:

语法:box-shadow:<length><length><length>colorinset|;

水平偏移值(可正负)垂直偏移值(可正负)阴影模糊值颜色投影方式【inset内部阴影,省略参数为外部阴影方式。注意:inset可以写在参数的第一个或最后一个,其它位置是无效的。】

兼容性:ff3.5+,Chrome2.0+,safari4+

兼容多种浏览器的添加阴影效果示例:

div{
//元素设置内阴影
box-shadow:4px 2px 6px #333333 inset; //*其他浏览器*
-webkit-box-shadow:-3px 4px 2px gray;/*chrom safari等基于webkit浏览器*/
-moz-box-shadow:-3px 4px 2px gray;/*ff浏览器*/
}

文本内容阴影:

语法:text-shadow:<length><length><length>color;

兼容性:ff,safari,Chrome,Opera,ie8+

text-shadow: 0 1px 1px #fff

相关推荐