如何将彩色阴影和边框属性应用于灰度图像？

有一种非常简单的方法可以将灰度效果应用于图像。使用filter()属性，我们可以将灰度效果应用于任何 HTML 元素。当我们将彩色框阴影应用于具有灰度属性的图像时，阴影也会变成灰度。例如：

HTML

输出：

可以观察到，在 CSS 中，阴影是为绿色定义的，但它显示为灰度。

这可以通过包装图像并将阴影属性应用于包装器分区来防止。例如：

HTML

输出：现在，可以观察到阴影是彩色的，而图像仍然是灰度的。

您可以使用这三个属性（grayscale()、box-shadow、border）的组合来创建一些更有趣的 CSS 效果。一些示例如下所示：

示例 1：您可以使用以下代码将鼠标指针悬停时将按钮 #1 转换为按钮 #2。

HTML

输出：

示例 2：您还可以使用这些效果将 PNG 图像转换为独特的按钮。这些效果主要用于创建 3D 透视图和最小视图。

HTML

输出：