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。

方法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。

方法3：使用 fliter: drop-shadow() 实现不规则图形阴影效果

{
  filter: drop-shadow(0px 4rpx 12rpx rgba(0, 0, 0, 0.06));
}

filter: drop-shadow(x偏移, y偏移, 模糊大小, 色值);

链接: https://fly63.com/article/detial/11598