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

1. 简介

在网站设计中，图片作为展示品牌、产品的有效手段，如何让图片更具艺术效果成为一个不可避免的问题。本文将介绍如何用CSS实现图片的3D凹凸感(凸出镜框外或凹陷镜框里)。

2. 实现原理

实现3D凹凸感主要其实是一种视觉效果，即使用阴影来营造深度感。通过调整阴影的位置和大小达到凸出或凹陷的视觉效果。

下面是以一个照片框为例，在不同距离和时间设置不同的阴影，使照片框达到3D凸出或凹陷的效果。

2.1 凸出效果

当图片需达到凸出效果时，阴影需要被添加在照片框的之外，比原来的照片框略大一点的阴影范围内。利用 transform: translate3d() 可以使图片在 X 和 Y 方向上进行平移，利用 box-shadow 为其添加阴影。具体实现代码如下：

img {
    transform: translate3d(10px, 10px, 0);
    box-shadow: 5px 5px 5px rgba(0,0,0,.4);
}

在该代码中，transform: translate3d() 属性为添加阴影准备。通过设置偏移量可调整阴影在图片上的位置。 box-shadow属性为添加阴影的具体操作。 该属性由四个参数组成：x轴偏移量、y轴偏移量、模糊量以及颜色。其中第一个参数设为5，使图片在 X 轴上向右偏移。第二个参数设为5，使图片在 Y 轴上向下偏移，模糊量为 5，颜色设置为 rgba(0,0,0,.4)。

效果如下：

2.2 凹陷效果

当图片需要凹陷效果时，则需要向里添加阴影。即应该在照片框的范围之内添加阴影。同样地，利用 transform: translate3d() 可以使图片在 X 和 Y 方向上进行平移，利用 box-shadow 为其添加阴影。具体实现代码如下：

img {
    transform: translate3d(10px, 10px, 0);
    box-shadow: inset 5px 5px 5px rgba(0,0,0,.4);
}

在该代码中，box-shadow 属性被设置为内阴影，因为我们要往框的内部添加阴影。inset 关键字为 box-shadow 添加内阴影。第一个和第二个参数为阴影的位置，跟凸出效果的代码一样；颜色仍然为 rgba(0,0,0,.4) 而阴影的模糊度仍然为 5。效果如下：

3. 小结

CSS不仅仅可以用来调整布局和样式，还可以让页面更加鲜活有趣。在网站中增加3D效果可以使页面更具交互性，同时更改页面的阴影效应可以使图片更具立体感。