相信大家对于box-shadow这个属性都应该很清楚,那就是给元素添加阴影的,今天我们就来详细的说一下这个属性。
首先来看语法:
<code>box-shadow: h-shadow v-shadow blur spread color inset;/<code>
h-shadow :必需的。水平阴影的位置。允许负值
v-shadow :必需的。垂直阴影的位置。允许负值
blur :可选。模糊距离
spread: 可选。阴影的大小
color:可选。阴影的颜色。在CSS颜色值寻找颜色值的完整列表
inset:可选。从外层的阴影(开始时)改变阴影内侧阴影
box-shadow最少为两个参数:即h-shadow和v-shadow,大家可以理解为x和y轴的概念。
向元素添加单个 box-shadow 效果时使用以下规则:
- 当给出两个、三个或四个 值时。如果只给出两个值, 那么这两个值将会被当作 来解释。如果给出了第三个值, 那么第三个值将会被当作解释。如果给出了第四个值, 那么第四个值将会被当作来解释。
- 可选,inset关键字。
- 可选,值。
完整顺序
<code> = inset? && {2,4} && ?/<code>
属性实例讲解
<code>img{box-shadow:10px 10px}/<code>
这里只设置了必须的两个参数,设置阴影为10px,没有背景色则默认为黑色,注意这两个参数如果设置为负数,则是相反的方向出现阴影,如下:
<code>img{box-shadow:-10px,-10px}/<code>
blur参数
此参数用来设置模糊距离,不能为负数。
<code>img{box-shadow:-10px -10px 20px;}//设置blur为20px/<code>
spread参数
此参数用来设置阴影的大小。
<code>img{ box-shadow:-10px -10px 20px 20px; }/<code>
color参数
此参数设置阴影的颜色。
<code>img{ box-shadow:-10px -10px 20px 20px gold; }/<code>
inset参数
此参数设置阴影向内。
<code>div{box-shadow:-10px -10px 20px 20px gold inset;}/<code>
注意内阴影对图片无效的,所以我用div代替。
实战
1.如果想要全部边缘都要阴影元素,直接把x和y设置为0即可。
<code>div{box-shadow:0px 0px 20px 10px green;}/<code>
2.一个元素可应用多个阴影效果。
<code>div{box-shadow:10px 10px 10px red,-10px -10px 10px green;}/<code>
3.镂空效果
html
<code>/<code>
css
<code>.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: 50%; transform: translateX(-50%); top: 60px; border-radius: 100%; width: 100px; height: 100px; box-shadow: 0 0 0 1000px rgba(0, 0, 0, 0.4); }/<code>
效果: