CSS阴影效果
css阴影效果：box-shadow、text-shadow、drop-shadow
- 想要盒子的轮廓产生阴影效果，使用box-shadow
- 想要文本的轮廓产生阴影效果，使用text-shadow
- 想要PNG图片非透明部分的轮廓产生阴影效果，使用fliter: drop-shadow()
当然，如果想要依据元素本身颜色产生映射的阴影颜色，可使用fliter的blur()、brightness()、opacity()三者搭配调色产生阴影效果。
方法1：使用text-shadow属性实现文字阴影效果
text-shadow属性用于设置带阴影的文本；可设置阴影的像素长度、宽度和模糊的距离以及阴影的颜色。
<style>
h1 {
color: red;
text-shadow: 3px 5px 5px #656B79;
}
</style>
<h1>文本阴影！</h1>text-shadow: h-shadow v-shadow blur color;注意： text-shadow属性连接一个或更多的阴影文本。属性是阴影，指定的每2或3个长度值和一个可选的颜色值用逗号分隔开来。已失时效的长度为0。
| 值 | 描述 |
|---|---|
| h-shadow | 必需。水平阴影的位置。允许负值。 |
| v-shadow | 必需。垂直阴影的位置。允许负值。 |
| blur | 可选。模糊的距离。 |
| color | 可选。阴影的颜色。 |
方法2：使用box-shadow属性实现边框阴影效果
box-shadow属性可以将阴影应用于文本框，可设置中阴影的像素长度，宽度和模糊的距离以及阴影的颜色。
<style>
div {
width: 300px;
height: 100px;
background-color: red;
box-shadow: 10px 10px 5px #888888;
}
</style>
<div>边框阴影！</div>语法
box-shadow: h-shadow v-shadow blur spread color inset;注意：boxShadow 属性把一个或多个下拉阴影添加到框上。该属性是一个用逗号分隔阴影的列表，每个阴影由 2-4 个长度值、一个可选的颜色值和一个可选的 inset 关键字来规定。省略长度的值是 0。
| 值 | 说明 |
|---|---|
| h-shadow | 必需的。水平阴影的位置。允许负值 |
| v-shadow | 必需的。垂直阴影的位置。允许负值 |
| blur | 可选。模糊距离 |
| spread | 可选。阴影的大小 |
| color | 可选。阴影的颜色。 |
| inset | 可选。从外层的阴影（开始时）改变阴影内侧阴影 |
方法3：使用 fliter: drop-shadow() 实现不规则图形阴影效果
在面对规则的矩形或者圆形，用box-shadow生成的投影可以说堪称完美。但是面对不规则图形，再用box-shadow生成的投影就有点力不从心了。
针对不规则图形，使用 filter 属性替换掉 box-shadow。
{
filter: drop-shadow(0px 4rpx 12rpx rgba(0, 0, 0, 0.06));
}其中 drop-shadow 参数与 box-shadow 基本一致。
语法
filter: drop-shadow(x偏移, y偏移, 模糊大小, 色值);左右位置以及上下位置是指定原始图像的阴影位置的数字。模糊条件指定轮廓的阴影的模糊程度，所有的单位都是px。
注意：fliter: drop-shadow()主要是用于PNG图片非透明部分的轮廓产生阴影效果。
本文内容仅供个人学习/研究/参考使用，不构成任何决策建议或专业指导。分享/转载时请标明原文来源，同时请勿将内容用于商业售卖、虚假宣传等非学习用途哦～感谢您的理解与支持！
