您的位置:首页> 日志> 前端技术 正文
DTOP

box-shadow的运用

liotc | 2020年07月10日 |

>>收藏本文 已有 0条评论

box-shadow 属性的官方描述是根据不同取值实现一个元素的一个或多个阴影效果。

 

1、获取单边阴影效果

a.获取单边(上)阴影效果

1
.box {box-shadow: 0px -15px 10px -15px #000;}

效果

 

b.获取单边(下)阴影效果

1
.box {box-shadow: 0px 15px 10px -15px #000;}

效果

 

c.获取单边(左)阴影效果

1
.box {box-shadow: -15px 0 10px -10px #000;}

效果

b.获取单边(右)阴影效果

1
.box {box-shadow: 15px 0 10px -10px #000;}

效果

2、获取双边阴影效果

a.获取双边(上下)阴影效果,可以用逗号隔开写左右阴影的参数。

1
.box {box-shadow: 0px -15px 10px -15px #000,0px 15px 10px -15px #000;}

效果

b.获取双边(左右)阴影效果,书写方法同上。

1
.box {box-shadow: -15px 0 10px -10px #000,15px 0 10px -10px #000;}

效果

c.获取双边(右下)阴影效果,书写方法同上。

1
.box {box-shadow: 15px 0 10px -10px #000,0px 15px 10px -15px #000;}

效果

d.获取双边(左下)阴影效果,书写方法同上。

1
.box {box-shadow: -15px 0 10px -10px #000,0px 15px 10px -15px #000;}

效果

e.获取双边(右上)阴影效果,书写方法同上。

1
.box {box-shadow: 0px -15px 10px -15px #000,15px 0 10px -10px #000;}

效果

f.获取双边(左上)阴影效果,书写方法同上。

1
.box {box-shadow: 0px -15px 10px -15px #000,-15px 0 10px -10px #000;}

效果

3、获取三边阴影效果

a.获取三边(上下左)阴影效果,可以根据上面的书写方法,继续用逗号隔开写。

1
.box {box-shadow: 0px -15px 10px -15px #000,-15px 0 10px -10px #000,0px 15px 10px -15px #000;}

b.也可以通过偏移x轴或者y轴的方法获取三边阴影,通过偏移Y轴正数,不显示上阴影。同理如果负数即不显示下阴影。通过偏移形式偏移数值必须大于模糊数值,不然还是会有略微显示。

1
2
.box {box-shadow: 0px 10px 10px 5px #003676;}
.box {box-shadow: 0px -10px 10px 5px #003676;}

效果

同理双边阴影也可用偏移x、y轴形式来实现,例如或许右下阴影效果。

1
.box {box-shadow: 10px 10px 10px 5px #003676;}

4、四边阴影应用太多。

此处只指外阴影效果,内阴影效果可增加 inset 参数多调试。