当前位置：首页 > CSS

css制作相框

2026-02-13 01:17:25CSS

使用CSS制作相框

通过CSS可以创建各种样式的相框效果，以下是几种常见的方法：

边框阴影效果 为图片添加阴影和边框可以模拟相框效果：

.photo-frame {
  border: 10px solid #f5f5f5;
  box-shadow: 0 0 10px rgba(0,0,0,0.3);
  padding: 5px;
  background: white;
  display: inline-block;
}

多层边框效果 使用伪元素创建多层边框：

.frame {
  position: relative;
  border: 10px solid #d4af37;
  padding: 15px;
  display: inline-block;
}

.frame::before {
  content: "";
  position: absolute;
  top: -5px;
  left: -5px;
  right: -5px;
  bottom: -5px;
  border: 2px solid rgba(0,0,0,0.1);
}

3D立体相框 通过CSS transform创建3D效果：

.photo-frame-3d {
  border: 15px solid #e6e6e6;
  box-shadow: 
    0 1px 3px rgba(0,0,0,0.3),
    0 10px 15px rgba(0,0,0,0.1);
  transform: perspective(500px) rotateY(5deg);
  background: white;
  padding: 10px;
}

复古相框效果

.vintage-frame {
  border: 20px solid #8B4513;
  background: #D2B48C;
  padding: 10px;
  box-shadow: 
    inset 0 0 30px rgba(0,0,0,0.3),
    0 0 20px rgba(0,0,0,0.4);
  position: relative;
}

.vintage-frame::after {
  content: "";
  position: absolute;
  top: 5px;
  left: 5px;
  right: 5px;
  bottom: 5px;
  border: 1px solid rgba(255,255,255,0.2);
}

圆角相框

.round-frame {
  border: 15px solid #f8f8f8;
  border-radius: 10px;
  box-shadow: 0 3px 10px rgba(0,0,0,0.2);
  padding: 5px;
  background: white;
}

使用CSS变量定制相框

:root {
  --frame-color: #4a4a4a;
  --frame-width: 15px;
}

.custom-frame {
  border: var(--frame-width) solid var(--frame-color);
  padding: 10px;
  box-shadow: 0 0 0 5px rgba(0,0,0,0.1);
}

这些CSS样式可以直接应用于包含图片的div元素上，通过调整颜色、宽度和阴影参数可以创建不同风格的相框效果。

css制作相框