当前位置：首页 > CSS

css制作照片

2026-04-01 13:07:50CSS

使用CSS制作照片效果

通过CSS可以创建照片的视觉效果，包括边框、阴影、滤镜等。以下是一些常见的方法：

边框和阴影效果

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

圆角照片

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

滤镜效果

.filter-photo {
  filter: sepia(50%) contrast(120%) brightness(90%);
  transition: filter 0.3s ease;
}

.filter-photo:hover {
  filter: none;
}

创建照片拼贴效果

使用CSS Grid或Flexbox可以制作照片拼贴布局：

css制作照片

网格布局

.photo-collage {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.photo-collage img {
  width: 100%;
  height: auto;
  transition: transform 0.3s;
}

.photo-collage img:hover {
  transform: scale(1.05);
}

重叠效果

.photo-stack {
  position: relative;
  width: 300px;
}

.photo-stack img {
  position: absolute;
  border: 5px solid white;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

.photo-stack img:nth-child(1) {
  transform: rotate(-5deg);
  z-index: 1;
}

.photo-stack img:nth-child(2) {
  transform: rotate(5deg);
  z-index: 2;
}

照片悬停效果

放大效果

css制作照片

.zoom-photo {
  overflow: hidden;
}

.zoom-photo img {
  transition: transform 0.5s;
}

.zoom-photo:hover img {
  transform: scale(1.1);
}

黑白转彩色

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

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

照片边框装饰

极简边框

.minimal-border {
  border: 1px solid #ddd;
  padding: 15px;
  background: white;
}

复古边框

.vintage-frame {
  border: 15px solid #f5e7d6;
  box-shadow: 
    inset 0 0 20px rgba(0,0,0,0.1),
    0 0 30px rgba(0,0,0,0.3);
  padding: 10px;
  background: #f8f1e5;
}

这些CSS技术可以单独使用或组合使用，根据具体需求调整参数值以达到理想的照片展示效果。