box-shadow属性四个值_css中的boxshadow属性详解
相信⼤家对于box-shadow这个属性都应该很清楚，那就是给元素添加阴影的，今天我们就来详细的说⼀下这个属性。
⾸先来看语法：
box-shadow: h-shadow v-shadow blur spread color inset;
值说明
h-shadow必需的。⽔平阴影的位置。允许负值
v-shadow必需的。垂直阴影的位置。允许负值
blur可选。模糊距离
spread可选。阴影的⼤⼩
color可选。阴影的颜⾊。在CSS颜⾊值寻颜⾊值的完整列表
inset可选。从外层的阴影(开始时)改变阴影内侧阴影
box-shadow最少为两个参数：即h-shadow和v-shadow，⼤家可以理解为x和y轴的概念。
向元素添加单个 box-shadow 效果时使⽤以下规则：
当给出两个、三个或四个 值时。
如果只给出两个值, 那么这两个值将会被当作 来解释。
如果给出了第三个值, 那么第三个值将会被当作解释。
如果给出了第四个值, 那么第四个值将会被当作来解释。
可选，inset关键字。
可选，值。
完整顺序
= inset? && {2,4} && ?
属性实例讲解
img{box-shadow:10px 10px}
这⾥只设置了必须的两个参数，设置阴影为10px，没有背景⾊则默认为⿊⾊，注意这两个参数如果设置为负数，则是相反的⽅向出现阴影，如下：
img{box-shadow:-10px,-10px}
blur参数
此参数⽤来设置模糊距离，不能为负数。
img{box-shadow:-10px -10px 20px;}//设置blur为20px
spread参数
此参数⽤来设置阴影的⼤⼩。
img{box-shadow:-10px -10px 20px 20px;}
color参数
此参数设置阴影的颜⾊。
img{box-shadow:-10px -10px 20px 20px gold;}
inset参数
此参数设置阴影向内。
div{box-shadow:-10px -10px 20px 20px gold inset;}
注意内阴影对图⽚⽆效的，所以我⽤div代替。
实战
1.如果想要全部边缘都要阴影元素，直接把x和y设置为0即可。div{box-shadow:0px 0px 20px 10px green;}
cssclass属性2.⼀个元素可应⽤多个阴影效果。
div{box-shadow:10px 10px 10px red,-10px -10px 10px green;}
3.镂空效果
html
<div class="shadow"><img src="www.sammh/dome/upload1/4921320615863570240730.jpeg"/><div class="mark"><i>i>div>div>
css
.shadow{overflow: hidden;position: relative;width:400px;}img{width:400px;}.mark{position: absolute;left: 0;right: 0;top: 0;bottom: 0;}.mark i{position: absolute;left: 5效果：
在线代码：codepen.io/jack-shangs/pen/mdVvOMz

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。