首页 > CSS, 语言 > CSS之阴影效果

CSS之阴影效果

2015年5月18日 发表评论 阅读评论

在CSS3中,引入了一个box-shadow属性,可以非常方便地给元素增加阴影效果,在各种电商网站中,非常常见,加了阴影效果以后,图片可以突出显示,减少了视觉疲劳。

下面就是一个CSS的往四周扩散的阴影效果,同时加入了对IE6-8的支持:

#box {
   zoom: 1; //触发hasLayout
   filter: progid:DXImageTransform.Microsoft.Shadow(Color=#cccccc, Strength=5, Direction=0),
         progid:DXImageTransform.Microsoft.Shadow(Color=#cccccc, Strength=5, Direction=90),
         progid:DXImageTransform.Microsoft.Shadow(Color=#cccccc, Strength=5, Direction=180),
         progid:DXImageTransform.Microsoft.Shadow(Color=#cccccc, Strength=5, Direction=270);
   box-shadow: 0 0 5px #cccccc;
   -webkit-box-shadow: 0 0 5px #cccccc;
   -moz-box-shadow: 0 0 5px #cccccc;
}
分类: CSS, 语言 标签: ,
  1. 本文目前尚无任何评论.
  1. 本文目前尚无任何 trackbacks 和 pingbacks.