CSS 涉及设计到阴影的相关内容包括三个方面:box-shadow属性(盒子阴影)、 text-shadow属性(文本阴影)、drop-shadow滤镜。 本篇文章旨在详细介绍和分析三种阴影的具体参数设置和典型用例。
box-shadow属性(盒子阴影)
向容器div添加阴影属性,box-shadow属性可以设置一个或多个下拉阴影的框。注意:box-shadow可以给同一个元素设置多个阴影效果,并用逗号进行分隔。
box-shadow属性(盒子阴影)语法
box-shadow: h-shadow v-shadow blur spread color inset;
boxShadow 属性把一个或多个下拉阴影添加到框上。该属性是一个用逗号分隔阴影的列表,每个阴影由 2-4 个长度值、一个可选的颜色值和一个可选的 inset 关键字来规定。省略长度的值是 0。
值 | 说明 |
---|---|
h-shadow | 必需的。水平阴影的位置。允许负值 |
v-shadow | 必需的。垂直阴影的位置。允许负值 |
blur | 可选。模糊距离 |
spread | 可选。阴影的大小 |
color | 可选。阴影的颜色。在CSS颜色值寻找颜色值的完整列表 |
inset | 可选。 阴影向内扩散,否则阴影向外扩散。 |
box-shadow属性(盒子阴影)属性详解
基本属性 | rgba(0,0,0,1.0)
总结:通过上面的属性演示,基本效果相信大家心里都已经有所收获。但不知道你发现没有,