box-shadow的用法

Posted 2020-11-16 liuxuelan

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样式，如图所示：

 

 

 

具体应用：