css制作div边框

使用 border 属性设置基本边框

通过 border 属性可以快速为 div 设置边框样式、宽度和颜色。语法如下：

div {
  border: 1px solid #000; /* 宽度 | 样式 | 颜色 */
}

• 宽度：支持像素（px）、em 或关键字（如 thin）。
• 样式：常见值包括 solid（实线）、dashed（虚线）、dotted（点线）。
• 颜色：支持十六进制、RGB 或颜色名称。

单独设置各边边框

通过 border-top、border-right、border-bottom 和 border-left 分别控制各边样式：

div {
  border-top: 2px dashed red;
  border-right: 1px solid blue;
  border-bottom: 3px dotted green;
  border-left: 1px solid gray;
}

圆角边框（border-radius）

使用 border-radius 为边框添加圆角效果：

div {
  border: 1px solid #000;
  border-radius: 10px; /* 统一圆角 */
  /* 或分别设置四个角 */
  border-radius: 5px 10px 15px 20px; /* 左上 右上 右下 左下 */
}

阴影效果（box-shadow）

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

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

透明边框（transparent）

设置透明边框可用于占位或悬停效果：

div {
  border: 2px solid transparent; /* 初始透明 */
  transition: border 0.3s;
}
div:hover {
  border-color: #000; /* 悬停时显示 */
}

双色边框（伪元素技巧）

通过伪元素实现复杂边框效果，例如双色边框：

div {
  position: relative;
  width: 200px;
  height: 100px;
  background: #fff;
}
div::before {
  content: "";
  position: absolute;
  inset: -5px; /* 覆盖整个div并外扩 */
  border: 3px solid red;
  z-index: -1;
}

注意事项

• 盒模型影响：边框宽度会占用 div 的实际尺寸，可通过 box-sizing: border-box 包含在总宽高中。
• 性能优化：避免过度使用阴影或复杂边框，可能影响渲染性能。