在CSS中,为图片添加阴影通常使用box-shadow属性。它可以在图片周围创建一个阴影效果,使图片更突出。下面是一些设置box-shadow属性的示例代码:
img {
box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}
在这个例子中,阴影由2像素的水平偏移量、2像素的垂直偏移量、4像素的模糊半径和0.3的alpha通道值组成。你可以调整这些值来控制阴影的大小、模糊度和颜色。
另一个常见的方式是使用图片容器,然后将阴影应用于容器。
.image-container {
box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}
.image-container img {
max-width: 100%;
height: auto;
}
在这个例子中,我们创建了一个包含图片的div容器,并将box-shadow效果应用于这个容器。我们还使用了max-width和height属性来确保图片在容器中适当的缩放。
总而言之,为图片添加阴影是一种简单而有效的方式,可使图片更具视觉吸引力。无论是应用于图片本身还是其周围的容器,box-shadow属性都是实现这种效果的理想选择。
文章说明:
本文原创发布于探乎站长论坛,未经许可,禁止转载。
题图来自Unsplash,基于CC0协议。
该文观点仅代表作者本人,探乎站长论坛平台仅提供信息存储空间服务。