box-shadow阴影

170 阅读1分钟

1. box-shadow设置阴影

介绍:会先将原有的正方形copy一份,x为正,则将copy的正方形向右平移,为负则向左平移;y为正向下平移,反之向上平移,模糊半径指的比如以平移后的正方形的最右边缘为中心线,如果有扩展半径,则以扩展半径的边缘为中心线,然后向两边模糊;最终原图形会覆盖平移后的图形和原图形重叠的部分。

默认是外阴影,可以采用inset,设置内阴影。

box-shadow: (inset)x偏移, y偏移, 模糊半径,扩展半径, 颜色

image.png

image.png

image.png

image.png

image.png

2. 设置多个阴影

设置多个阴影时,采用逗号隔开就行

box-shadow: 50px 50px 20px red, inset 0px 0px 10px blue;

image.png