多重文字阴影与盒阴影技巧

发布日期:2015-09-01 23:02:49
我们还可以制作多重文字阴影,只需将两组值使用逗号分隔开即可,比如:
text-shadow: 0px 1px #ffffff,4px 4px 0px #dad7d7;
之前精妙的浮雕效果必不可少,否则文字会变模糊。所以这个声明合并了已有的投影效

果和上一节的浮雕效果。

掌握了文字阴影,盒阴影就是小菜一碟了。盒阴影的语法与文字阴影完全一样:水平偏
移距离、垂直偏移距离、模糊半径,以及阴影颜色:
box-shadow: 0px 3px 5px #444444;
但是,盒阴影的的跨浏览器支持并不好,所以明智的做法是使用浏览器私有前缀,例如:
-ms-box-shadow: 0px 3px 5px #444444;
-moz-box-shadow: 0px 3px 5px #444444;
-webkit-box-shadow: 0px 3px 5px #444444;
box-shadow: 0px 3px 5px #444444;
我们来给 AND THE WINNER ISN’T网站侧边栏的电影海报加点阴影效果:
.sideBlock img {
max-width: 45%;
box-shadow: 0px 3px 5px #444444;
}

相关文章

  Copyright © 2010-2018 北京梦创义科技
公司地址:朝阳区紫芳路9号院广顺园2号楼2605A

联系我们| 关于我们| 网站地图| 北京网站建设| 北京网页设计