当前位置：首页 > CSS

css照片制作

2026-04-01 07:19:35CSS

CSS 照片制作方法

使用 CSS 可以创建简单的照片效果，包括滤镜、边框、阴影等。以下是几种常见的 CSS 照片处理方法。

添加边框和阴影

通过 box-shadow 和 border 属性为图片添加装饰效果。

.photo-frame {
  border: 10px solid #f0f0f0;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  border-radius: 5px;
}

应用滤镜效果

CSS 的 filter 属性可以为图片添加灰度、模糊、亮度等效果。

.grayscale-photo {
  filter: grayscale(100%);
}

.blur-photo {
  filter: blur(2px);
}

.brightness-photo {
  filter: brightness(150%);
}

创建圆形图片

使用 border-radius 属性将图片裁剪为圆形。

.circle-photo {
  border-radius: 50%;
  width: 200px;
  height: 200px;
  object-fit: cover;
}

叠加文字

通过绝对定位在图片上叠加文字。

.photo-container {
  position: relative;
  display: inline-block;
}

.photo-text {
  position: absolute;
  bottom: 10px;
  left: 10px;
  color: white;
  font-size: 20px;
  text-shadow: 1px 1px 2px black;
}

悬停效果

为图片添加悬停动画或滤镜变化。

css照片制作

.photo-hover:hover {
  transform: scale(1.05);
  transition: transform 0.3s ease;
  filter: sepia(50%);
}

完整示例

<div class="photo-frame photo-container">
  <img src="your-image.jpg" class="circle-photo" alt="Sample Photo">
  <div class="photo-text">CSS Photo</div>
</div>

这些 CSS 技术可以组合使用，创造出各种照片展示效果。通过调整参数值，可以获得不同的视觉风格。