如何在 CSS 中为不规则 PNG 图像创建阴影？

在 CSS 中对不规则 PNG 图像应用投影

为具有不规则形状的 PNG 图像创建投影效果可能会带来挑战使用标准 CSS box-shadow 属性。这是因为 box-shadow 在图像周围添加了方形阴影，与图像中物体的形状不相符。

解决方案：使用 CSS 滤镜属性

要向不规则形状的 PNG 图像添加阴影，我们可以使用 CSS 滤镜属性和 dropShadow() 函数。此函数采用四个参数：x 偏移、y 偏移、模糊半径和颜色。

示例代码

以下是如何应用下降的示例使用 dropShadow() 函数添加阴影：

img {
  width: 150px;
  -webkit-filter: drop-shadow(5px 5px 5px #222);
  filter: drop-shadow(5px 5px 5px #222);
}

在此示例中，我们应用了投影在 x 和 y 方向上都有 5 像素偏移、5 像素模糊半径和黑色 (#222)。

内联样式

您还可以应用内联阴影，使用 style 属性：

<img src="https://cdn.freebiesupply.com/logos/large/2x/stackoverflow-com-logo-png-transparent.png"
style="-webkit-filter: drop-shadow(5px 5px 5px #222); filter: drop-shadow(5px 5px 5px #222);">

使用 dropShadow() 函数允许您创建精确遵循 PNG 图像形状的投影，提供更具视觉吸引力和真实感的效果。

以上是如何在 CSS 中为不规则 PNG 图像创建阴影？的详细内容。更多信息请关注PHP中文网其他相关文章！