box-shadow的用法

CaiKanXP 2019-10-20

css3新增了好多属性,三年前学习过但是不怎么使用感觉自己又不会用它了,今天学习顺便分享出来供大家一起学习。

box-shadow属性向框添加一个或多个阴影;

标准形式 :box-shadow:h-shadow v-shadow blur spread color inset;

注意:box-shadow 向框添加一个或多个阴影。该属性是由逗号分隔的阴影列表,每个阴影由 2-4 个长度值、可选的颜色值以及可选的 inset 关键词来规定。省略长度的值是 0。

个属性值说明:

h-shadow:横向阴影的大小,正值(1px)在右边,值越大阴影越大;负值(-1px)在左边,值越小阴影越大,它们的阴影都在盒子上面可见;当值为0时,阴影在盒子下面不可见;

v-shadow:纵向阴影的大小,正值(1px)在右下边,值越大阴影越大;负值(-1px)在上边,值越小阴影越大,它们的阴影都在盒子上面可见;当值为0时,阴影在盒子下面不可见;

blur:阴影的模糊程度,值越大越模糊;

spread:正值越大向外伸缩越明显,负值越小向内收缩,在盒子下面不可见;

color:阴影的颜色值;

inset:设置为内阴影,没有设置默认为外阴影;

实现方式:

div{
    margin:0 auto;
    width:200px;
    height:200px;
    background:purple;
    box-shadow:-11px 0;
    box-shadow:11px 0;
    box-shadow: 0 10px;
    box-shadow: 0 -10px;
    box-shadow: 3px 10px 10px 10px;
    box-shadow: 3px 10px 10px 10px yellow;
    box-shadow:inset -11px -20px -8px yellow;
  }
以上代码是我把每个属性值都进行了验证,根据执行顺序,大家可以把下面的都注释了,从第一个开始依次进行验证,我上面代码最后效果是我最后设置的shadow样式,如图所示:
box-shadow的用法

 

具体应用:

相关推荐