box-shadow 给图片添加内部阴影

box-shadow 是css3中定义的设置元素阴影的属性，其语法结构如下：

 <shadow> = inset? && <length>{2,4} && <color>?

1st <length>为水平位置的偏移必选

2nd <length>为竖直方向偏移必选

3rd <length>为模糊化的指数可选

4th<length> 为模糊的扩散距离可选

inset 表示十分位内部偏移可选

color 为阴影的颜色

但是如果我们想要给图片设置内部偏移的阴影时，就会导致我们设置的阴影被图片给挡住。

为了解决这个问题，我们可以通过设置和图片一样大小的遮罩的方式进行解决：

.img-box-shadow{
        position: absolute;
        width: 100%;
        height: 100%;
        box-shadow:  0px 0px 30px 10px gray inset;
        -moz-box-shadow:  0px 0px 30px 10px gray inset;
        -webkit-box-shadow:  0px 0px 30px 10px gray inset;
}

该元素是定位到父级元素内的，所以要给父级元素设定 position:relative;

当然既然我们使用了css3的样式，我也可以通过给父级元素直接添加伪类元素的方式进行修改，而且减少了dom元素的使用，使得样式和内容进行了分离，也正是伪类元素真正被引入的目的：

.img-wrapper{
   position:relative;
}

.img-wrapper:before{
   position:abosolute;
   width:100%;
   height:100%;
   box-shadow:  0px 0px 30px 10px gray inset;
   -moz-box-shadow:  0px 0px 30px 10px gray inset;
   -webkit-box-shadow:  0px 0px 30px 10px gray inset;
}

网上还有通过js的方式，将img替换为div，图片修改为背景的方式，实现图片的内部阴影效果的实现。这里我们不进行推荐，因为你要使用box-shadow的话，浏览器必须支持css3属性，使用能够使用css3的话，我们没有必要再将我们的样式效果交给js进行处理，这样大大违背了css3将页面元素、样式和逻辑相互分离的目的。

巴特西

box-shadow 给图片添加内部阴影

最新文章

热门文章