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将页面元素、样式和逻辑相互分离的目的。