首页 > 代码库 > box-shadow 给图片添加内部阴影
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 给图片添加内部阴影
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。