css相框制作

使用边框属性制作基础相框

通过CSS的border属性可快速创建简单相框。设置宽度、样式和颜色即可：

.frame {
  border: 10px solid #8B4513; /* 棕色木质效果 */
  padding: 20px;
  background-color: white;
  width: 300px;
}

调整border-width和border-color可改变相框厚度和风格。

添加阴影和圆角增强立体感

结合box-shadow和border-radius模拟真实相框的立体效果：

.frame {
  border: 15px ridge #D2B48C; /* 浮雕效果 */
  box-shadow: 5px 5px 15px rgba(0,0,0,0.3);
  border-radius: 2px;
  padding: 25px;
}

ridge或groove边框样式能呈现雕刻纹理。

使用伪元素创建复杂装饰

通过::before和::after添加装饰性元素：

.frame {
  position: relative;
  border: 8px solid #C19A6B;
}
.frame::before {
  content: "";
  position: absolute;
  top: -15px; left: -15px;
  right: -15px; bottom: -15px;
  border: 2px dashed gold;
  pointer-events: none;
}

此代码在相框外围添加金色虚线装饰层。

背景图案实现纹理相框

利用background-image添加木质或花纹背景：

.frame {
  border: 20px solid transparent;
  padding: 15px;
  background: 
    linear-gradient(45deg, #8B4513 25%, transparent 25%),
    linear-gradient(-45deg, #8B4513 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #5D3A1A 75%),
    linear-gradient(-45deg, transparent 75%, #5D3A1A 75%);
  background-size: 20px 20px;
}

此例创建了斜线木质纹理效果。

响应式相框适配不同图片

使用百分比或视口单位确保相框自适应：

.frame {
  width: 90%;
  max-width: 600px;
  border: clamp(5px, 2vw, 20px) solid #A67C52;
  aspect-ratio: 4/3; /* 固定宽高比 */
}

clamp()函数让边框宽度随屏幕大小动态调整。