发布时间:2018-03-07责任编辑:朱明 浏览:1955
css3新增的text-shadow和box-shadow可以轻松完成阴影的添加,且效果自然,不逊于ps制作出的效果,唯一的问题就是多层阴影的时候可能渲染要多耗费一点性能。
1、text-shadow语法结构
text-shadow:length length length color;
第一个length:阴影水平偏移距离,可以为负值。
第二个length:阴影纵向偏移距离,可以为负值。
第三个length:阴影的模糊半径,不允许负值,可以缺省。
color:阴影的颜色,可以缺省。缺省的时候默认是#333深灰色,不是黑色。
如果掌握了ps的图层样式,知道如何设置投影、内阴影、描边、发光等样式,是比较容易理解该语法结构的,且可以设置多个阴影。
2、html结构
3、CSS3样式
4、效果如图
项目设计组 供稿