css 框怎么制作

制作 CSS 框的基本方法

使用 border 属性可以快速创建基础的边框框体。通过调整宽度、样式和颜色实现不同效果。

.box {
  border: 1px solid #000;
  width: 200px;
  height: 100px;
}

圆角边框的实现

通过 border-radius 属性可为框体添加圆角效果。数值越大圆角弧度越明显。

.rounded-box {
  border: 2px dashed #3498db;
  border-radius: 10px;
  padding: 15px;
}

阴影效果增强

box-shadow 属性能为框体添加投影效果，参数分别控制偏移、模糊、扩散和颜色。

.shadow-box {
  box-shadow: 5px 5px 15px rgba(0,0,0,0.3);
  background: #f8f9fa;
}

双色边框技巧

利用 outline 和 border 组合可实现双边框效果，注意两者偏移量的配合。

.double-border {
  border: 3px solid #e74c3c;
  outline: 3px solid #2980b9;
  outline-offset: -6px;
}

响应式框体设计

结合百分比单位和最大宽度属性，使框体适应不同屏幕尺寸。

.responsive-box {
  width: 90%;
  max-width: 600px;
  margin: 0 auto;
}