当前位置：首页 > CSS

css制作照片

2026-01-28 10:07:01CSS

使用CSS制作照片效果

通过CSS可以创建照片展示效果，包括边框、阴影、滤镜和悬停动画等。以下是几种常见的方法：

添加边框和阴影

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

应用滤镜效果

.photo-filter {
  filter: grayscale(50%) brightness(90%);
  transition: filter 0.3s ease;
}
.photo-filter:hover {
  filter: grayscale(0%) brightness(100%);
}

创建圆形照片

.circle-photo {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid #eee;
}

添加悬停动画

.photo-animate {
  transition: transform 0.3s ease;
}
.photo-animate:hover {
  transform: scale(1.05) rotate(2deg);
}

照片墙布局示例

使用CSS Grid创建照片墙布局：

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

宝丽来风格照片效果

创建复古宝丽来风格的照片展示：

.polaroid {
  background: white;
  padding: 15px 15px 40px;
  box-shadow: 0 3px 6px rgba(0,0,0,0.16);
  transform: rotate(-1deg);
  position: relative;
}
.polaroid:after {
  content: "照片";
  position: absolute;
  bottom: 15px;
  left: 0;
  width: 100%;
  text-align: center;
  font-family: "Courier New", monospace;
  color: #888;
}

响应式照片处理

确保照片在不同设备上正常显示：

css制作照片

.responsive-photo {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

@media (max-width: 768px) {
  .photo-wall {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  }
}

这些CSS技巧可以组合使用，根据具体需求调整参数值，创建出各种风格的照片展示效果。