css制作边框

使用 border 属性

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

border: [宽度] [样式] [颜色];

示例：

div {
  border: 2px solid #ff0000;
}

• 宽度：支持 px、em、rem 等单位。
• 样式：常见值包括 solid（实线）、dashed（虚线）、dotted（点线）。
• 颜色：支持十六进制、RGB、RGBA 等格式。

单独设置边框方向

通过 border-top、border-right、border-bottom、border-left 可以单独设置某一方向的边框。示例：

div {
  border-top: 1px dashed #000;
  border-bottom: 3px double #333;
}

圆角边框

使用 border-radius 属性实现圆角效果。可以设置单个值（统一圆角）或多个值（分别控制四个角）：

div {
  border-radius: 10px; /* 统一圆角 */
  border-radius: 5px 10px 15px 20px; /* 左上、右上、右下、左下 */
}

边框阴影

通过 box-shadow 添加边框阴影效果。语法：

box-shadow: [水平偏移] [垂直偏移] [模糊半径] [阴影颜色];

示例：

div {
  box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.3);
}

透明边框

使用 transparent 或 RGBA 颜色实现透明边框：

div {
  border: 2px solid transparent; /* 完全透明 */
  border: 2px solid rgba(255, 0, 0, 0.5); /* 半透明红色 */
}

渐变边框

结合 border-image 和 linear-gradient 实现渐变边框：

div {
  border: 2px solid;
  border-image: linear-gradient(to right, #ff0000, #00ff00) 1;
}

注意事项

• 边框宽度会影响盒模型的总尺寸，可通过 box-sizing: border-box 避免布局问题。
• 虚线（dashed）或点线（dotted）的显示效果可能因浏览器或分辨率不同而略有差异。