当前位置：首页 > CSS

css制作照片

2026-03-11 17:03:40CSS

CSS 制作照片效果

使用 CSS 可以轻松实现照片的边框、阴影、滤镜等效果，以下是一些常见的方法：

边框与圆角效果

.photo {
  border: 5px solid #f0f0f0;
  border-radius: 10px;
}

通过 border 属性设置边框的宽度、样式和颜色，border-radius 属性控制圆角大小。

阴影效果

.photo {
  box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.3);
}

box-shadow 属性可以添加阴影效果，参数依次为水平偏移、垂直偏移、模糊半径和颜色。

滤镜效果

.photo {
  filter: grayscale(50%) brightness(110%);
}

filter 属性支持多种滤镜效果，如灰度 (grayscale)、亮度 (brightness)、对比度 (contrast) 等。

悬停动画

.photo:hover {
  transform: scale(1.05);
  transition: transform 0.3s ease;
}

通过 transform 和 transition 实现悬停时的缩放动画效果。

叠加文字

.photo-container {
  position: relative;
}
.photo-caption {
  position: absolute;
  bottom: 10px;
  left: 0;
  background: rgba(0, 0, 0, 0.5);
  color: white;
  width: 100%;
  padding: 10px;
}

使用 position: relative 和 position: absolute 在照片上叠加文字说明。

响应式图片

.photo {
  max-width: 100%;
  height: auto;
}

确保照片在不同设备上自适应显示。

css制作照片

示例代码

<div class="photo-container">
  <img src="example.jpg" alt="示例照片" class="photo">
  <div class="photo-caption">这是一张示例照片</div>
</div>

.photo-container {
  position: relative;
  display: inline-block;
}
.photo {
  border: 5px solid #f0f0f0;
  border-radius: 10px;
  box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.3);
  filter: brightness(110%);
  max-width: 100%;
  height: auto;
  transition: transform 0.3s ease;
}
.photo:hover {
  transform: scale(1.05);
}
.photo-caption {
  position: absolute;
  bottom: 10px;
  left: 0;
  background: rgba(0, 0, 0, 0.5);
  color: white;
  width: 100%;
  padding: 10px;
  text-align: center;
}

通过组合这些 CSS 属性，可以创建出各种美观的照片展示效果。