2020-09-12 box-shadow

box-shadow: h-shadow v-shadow blur spread color inset;

h-shadow必需的。水平阴影的位置。允许负值

v-shadow必需的。垂直阴影的位置。允许负值

blur可选。模糊距离

spread可选。阴影的大小

color可选。阴影的颜色。在CSS颜色值寻找颜色值的完整列表

inset可选。从外层的阴影(开始时)改变阴影内侧阴影

可选距离中,模糊距离优先级高于额外的阴影大小。

例子1:平移


正值为向右40px,向下0,模糊0
出现一个同样大小的块

例子2:多个阴影(逗号隔开即可)


逗号隔开,可以省略可选项
三个图形

这种多阴影可以利用伪类生成器如befor或after生成一些小零件。

如这种

待续。。。。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。