阴影是设计中经常用到的效果,它能提高设计的质感,在CSS3中具有text-shadow,box-shadow属性,通过简单的设置就可以实现不错的阴影效果.如图:
text-shadow语法:
selector { text-shadow: length1 length2 length3 color;}
其中:
length1: X轴方向偏移(正值是向右偏移,负值是向左);
length2: Y轴方向偏移(正值是向下偏移,负值是向上);
length3: 阴影模糊半径(值越大阴影越模糊);
color:阴影颜色;
目前支持的浏览器:
FF 3.5, Opera 9.64+, Safari 4, Chrome (IE9待测…)
box-shadow语法:
跟text-shadow的语法相似,但目前只有FF和safari,chrome通过私有属性来实现:
FF: selector { -moz-box-shadow: -2px -2px 0 #333; }
webkit内核浏览器: selector { -webkit-box-shadow: 2px 3px 5px #333; }
来看几个例子:
提示：你可以先修改部分代码再运行。
