用css制作方框

使用 CSS 制作方框

基础方框

通过 border 属性可以快速创建一个方框。以下是一个简单的示例：

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

• width 和 height 定义方框的尺寸。
• border 设置边框的宽度、样式和颜色。

圆角方框

使用 border-radius 属性可以为方框添加圆角：

.rounded-box {
  width: 200px;
  height: 200px;
  border: 2px solid #000;
  border-radius: 10px;
}

• border-radius 的值越大，圆角越明显。

阴影效果

通过 box-shadow 可以为方框添加阴影：

.shadow-box {
  width: 200px;
  height: 200px;
  border: 2px solid #000;
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
}

• box-shadow 的参数依次为水平偏移、垂直偏移、模糊半径和颜色。

渐变边框

使用 background-clip 和 padding 可以模拟渐变边框：

.gradient-box {
  width: 200px;
  height: 200px;
  padding: 2px;
  background: linear-gradient(45deg, #ff0000, #0000ff);
  background-clip: content-box;
}

• padding 定义边框的宽度。
• background 设置渐变颜色。

虚线边框

通过 border-style 可以创建虚线边框：

.dashed-box {
  width: 200px;
  height: 200px;
  border: 2px dashed #000;
}

• dashed 表示虚线样式，也可以用 dotted 表示点线。

响应式方框

使用百分比或 vw/vh 单位可以让方框适应不同屏幕尺寸：

.responsive-box {
  width: 50vw;
  height: 50vh;
  border: 2px solid #000;
}

• vw 和 vh 分别表示视口宽度和高度的百分比。

这些方法可以根据需求灵活组合，实现多样化的方框效果。