当前位置：首页 > CSS

用css制作照片

2026-01-28 18:50:20CSS

使用CSS创建照片效果

通过CSS可以模拟照片的外观，包括边框、阴影、倾斜效果等。以下是几种常见的照片样式实现方法。

基础照片样式

为元素添加边框和内边距，模拟照片的物理边缘：

.photo {
  width: 300px;
  height: 200px;
  background-color: #fff;
  border: 10px solid #f5f5f5;
  padding: 15px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

倾斜照片效果

使用transform属性创建随意摆放的照片效果：

.tilted-photo {
  transform: rotate(3deg);
  transition: transform 0.3s ease;
}

.tilted-photo:hover {
  transform: rotate(0deg);
}

宝丽来风格

添加底部区域模拟宝丽来相纸：

.polaroid {
  background: white;
  padding: 15px 15px 50px 15px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
  position: relative;
}

.polaroid::after {
  content: "2023.07";
  position: absolute;
  bottom: 15px;
  left: 15px;
  font-family: cursive;
  color: #666;
}

老照片效果

使用滤镜创建复古外观：

.vintage-photo {
  filter: sepia(60%) contrast(110%) brightness(90%);
  border: 8px double #e0c9a6;
  background-blend-mode: luminosity;
}

悬浮照片

多层阴影创造立体感：

.floating-photo {
  box-shadow: 
    0 1px 4px rgba(0,0,0,0.3),
    0 0 40px rgba(0,0,0,0.1) inset;
  border: 1px solid #efefef;
}

照片堆叠效果

使用伪元素创建多张照片堆叠的视觉效果：

.photo-stack {
  position: relative;
}

.photo-stack::before,
.photo-stack::after {
  content: "";
  position: absolute;
  width: 90%;
  height: 90%;
  background: #fff;
  border: 1px solid #ddd;
  z-index: -1;
}

.photo-stack::before {
  transform: rotate(3deg);
  top: 5px;
  left: 5px;
}

.photo-stack::after {
  transform: rotate(-2deg);
  top: 10px;
  left: -5px;
}

这些CSS技术可以组合使用，通过调整参数值获得不同的照片风格效果。实际应用中可将这些类应用于包含实际图片的容器元素上。

用css制作照片