css制作方框

使用 border 属性创建方框

通过 border 属性可以快速为元素添加方框。设置边框的宽度、样式和颜色即可实现。

.box {
  border: 2px solid #000; /* 宽度2px、实线、黑色 */
  width: 200px;
  height: 100px;
}

自定义边框样式

通过 border-width、border-style 和 border-color 分别控制边框的细节。

.box {
  border-width: 1px 3px 5px 2px; /* 上、右、下、左 */
  border-style: dashed dotted solid double;
  border-color: red green blue yellow;
}

圆角方框

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

.box {
  border: 2px solid #333;
  border-radius: 10px; /* 统一圆角 */
  /* 或分别设置四个角 */
  border-radius: 5px 10px 15px 20px; /* 左上、右上、右下、左下 */
}

阴影效果

通过 box-shadow 为方框添加阴影，增强立体感。

.box {
  border: 1px solid #ddd;
  box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.2); /* 水平偏移、垂直偏移、模糊半径、颜色 */
}

虚线边框

使用 border-style: dashed 实现虚线边框，可通过 border-spacing 调整间隔（需配合背景裁剪）。

.box {
  border: 2px dashed #666;
  background-clip: padding-box; /* 防止背景色覆盖边框 */
}

双色边框

通过伪元素或 outline 实现双色边框效果。

.box {
  border: 3px solid blue;
  outline: 3px solid red;
  outline-offset: 3px; /* 控制outline与border的间距 */
}

响应式方框

使用百分比或视口单位（如 vw/vh）使方框适应不同屏幕尺寸。

.box {
  width: 80%;
  max-width: 600px;
  border: 1px solid #000;
}