css如何制作框

使用 border 属性制作基础框

通过 border 属性可以快速为元素添加边框。可以指定边框的宽度、样式和颜色：

.box {
  border: 2px solid #000; /* 宽度为2px、实线、黑色的边框 */
}

• border-width: 控制边框粗细（如 1px、thin）。
• border-style: 支持 solid（实线）、dashed（虚线）、dotted（点线）等。
• border-color: 支持颜色值（如 #ff0000、rgb(255, 0, 0)）。

为不同边设置不同样式

通过 border-top、border-right 等属性单独控制各边：

.box {
  border-top: 1px dashed #ccc;
  border-bottom: 3px double #333;
}

或使用简写：

.box {
  border: 1px solid #000;
  border-left: 4px dotted red; /* 覆盖左边框样式 */
}

圆角边框（border-radius）

通过 border-radius 让边框变为圆角：

.box {
  border: 2px solid #000;
  border-radius: 10px; /* 统一圆角 */
}

• 单独控制各角：

  .box {
    border-radius: 5px 10px 15px 20px; /* 左上、右上、右下、左下 */
  }

阴影效果（box-shadow）

为边框添加阴影增强立体感：

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

• 内阴影：

  .box {
    box-shadow: inset 0 0 8px #000;
  }

渐变或图片边框（border-image）

使用图片或渐变作为边框：

.box {
  border: 10px solid transparent;
  border-image: linear-gradient(to right, red, blue) 1;
}

或引用图片：

.box {
  border-image: url('border.png') 30 round;
}

注意事项

• 边框会占用元素的实际宽度和高度（可通过 box-sizing: border-box 调整）。
• 虚线或点线样式在不同浏览器中可能显示不一致，需测试兼容性。