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将页面元素、样式和逻辑相互分离的目的。
时间: 2024-10-06 10:46:10