当前位置：首页 > CSS

css相片制作

2026-04-01 05:11:43CSS

使用CSS制作相片效果

通过CSS可以创建各种相片效果，包括边框、阴影、滤镜和悬停效果等。以下是一些常见的CSS相片制作方法：

边框与阴影效果 为图片添加边框和阴影可以增强视觉层次感：

.photo {
  border: 10px solid #fff;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
  background: white;
  padding: 5px;
}

滤镜效果 CSS滤镜可以改变图片的视觉效果：

css相片制作

.sepia-effect {
  filter: sepia(80%);
}
.blur-effect {
  filter: blur(2px);
}

悬停动画 添加悬停效果使相片更具交互性：

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

创建宝丽来相框效果

模拟经典宝丽来相片样式：

css相片制作

.polaroid {
  width: 250px;
  padding: 15px 15px 40px;
  background: white;
  box-shadow: 0 3px 6px rgba(0,0,0,.25);
  position: relative;
}
.polaroid:after {
  content: "";
  position: absolute;
  bottom: 15px;
  right: 15px;
  width: 50%;
  height: 20px;
  background: rgba(0,0,0,.3);
  transform: rotate(5deg);
}

响应式相片网格

创建适应不同屏幕尺寸的相片网格：

.photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 15px;
}
.photo-grid img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

老照片效果

模拟老照片泛黄褪色效果：

.vintage-photo {
  position: relative;
}
.vintage-photo::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(242, 215, 167, 0.3);
  mix-blend-mode: overlay;
}

这些CSS技术可以单独使用或组合使用，根据需求创建各种相片效果。通过调整参数如阴影大小、滤镜强度等，可以进一步定制视觉效果。