用CSS实现图片的3D凹凸感(凸出镜框外或凹陷镜框里)

下面我将详细讲解如何用 CSS 实现图片的 3D 凹凸感。

准备图片

首先我们需要准备一张需要进行 3D 处理的图片。在该图片上可以尽可能的增加一些明亮和阴暗的区域，以便更好地突出凸出和凹陷的效果。

CSS 实现 3D 凹凸感

接下来，我们可以使用 CSS 来实现 3D 凹凸感。下面是一些示例说明：

使用 box-shadow 实现凸出

可以使用 box-shadow 属性来实现凸出的效果，具体代码如下：

.box {
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
  transform: rotateY(45deg);
}

在这个示例中，我们创建了一个 box 类，使用 box-shadow 属性创建了一个黑色阴影。我们还使用 transform 属性的 rotateY 值 45 度来使图像围绕 Y 轴旋转，并进一步突出凸出的效果。

使用 filter 实现凹陷

可以使用 filter 属性来模拟深度感，示例如下：

.box {
  filter: drop-shadow(0px 2px 0px rgba(0, 0, 0, 0.5)) blur(2px);
  transform: rotateY(-45deg);
}

在这个示例中，我们同样创建了一个 box 类，使用 filter 属性。其中，drop-shadow 函数用于创建投影，其参数表示阴影的偏移、模糊程度和颜色；blur 函数表示对图像进行模糊处理，以模拟凹陷的效果。

总结

使用 CSS 实现图片的 3D 凹凸感是一项有趣且富有创意的技术。通过增加明亮和阴暗的区域，我们可以更好地突出效果，并使用 box-shadow 和 filter 等属性来模拟凸出和凹陷的效果。