CSS阴影效果

css阴影效果：box-shadow、text-shadow、drop-shadow

当然，如果想要依据元素本身颜色产生映射的阴影颜色，可使用fliter的blur()、brightness()、opacity()三者搭配调色产生阴影效果。

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。

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。

在面对规则的矩形或者圆形，用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图片非透明部分的轮廓产生阴影效果。

Recommend