阴影总是赋予图像清新的外观并使其引人注目。
CSS box-shadow 属性允许在图像上添加阴影，但我们不能将它用于 png 图像，因为效果总是会放置一个方形图像阴影。
所以，如果你想为png图片创建阴影，最好的选择是filter属性，它有很多值可以帮助你解决很多样式问题。
如何将投影应用于 PNG 图像。
- 将图像源放在 <body> 部分。
- 在 <style> 部分给出图像的宽度。
- 将过滤器属性设置为“投影”值。
有四个值：“offset-x”指定水平距离。
“offset-y”指定垂直距离。
我们将“offset-x”和“offset-y”设置为“5px”。
下一个是“blur-radius”，它在图像上应用更多的模糊。
我们将其设置为“5px”。
第四个值是颜色。
可以使用颜色名称、十六进制颜色代码、rgb()、rgba()、hsl()、hsla()。
我们可以从我们的颜色选择器工具中选择颜色。
filter 属性与 -webkit- 扩展一起使用。
为 PNG 图像创建投影的示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
img {
width: 250px;
-webkit-filter: drop-shadow(5px 5px 5px #666666);
filter: drop-shadow(5px 5px 5px #666666);
}
</style>
</head>
<body>
<h2>Drop Shadow on PNG image</h2>
<img src="//static/img/logo.png" alt="onitroad logo">
</body>
</html>
之前我们讲过 box-shadow 属性和 drop-shadow() CSS 函数之间的区别，现在让我们在下面的示例中更加明显。
为 PNG 图像创建投影和框阴影的示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
img {
width: 200px;
}
.box-shadow {
float: left;
box-shadow: 7px 7px 7px #666666;
}
.drop-shadow {
float: right;
}
.drop-shadow img {
filter: drop-shadow(7px 7px 7px #666666);
-webkit-filter: drop-shadow(7px 7px 7px #666666);
}
</style>
</head>
<body>
<h2>Difference between box-shadow and drop-shadow</h2>
<div class="images">
<div class="box-shadow">
<p>Box-shadow
<img src="notebook.png" />
</p>
</div>
<div class="drop-shadow">
<p>Drop-shadow
<img src="car.png" />
</p>
</div>
</div>
</body>
</html>
正如我们在示例中看到的，我们使用相同的 png 图像，但我们将 box-shadow 放在第一种情况下，将 drop-shadow 放在第二种情况下。
日期：2020-06-02 22:15:01 来源：oir作者：oir