css 边框制作

CSS 边框基础语法

使用 border 属性可快速定义边框样式，包含宽度、样式和颜色：

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

• 宽度：border-width（如 2px、thin）。
• 样式：border-style（如 solid、dashed、dotted）。
• 颜色：border-color（支持 HEX、RGB、HSL 等）。

单边边框控制

通过方向属性单独设置某一边的边框：

border-top: 2px dashed red;  
border-right: 1px solid blue;  
border-bottom: 3px dotted green;  
border-left: 1px solid #ccc;  

圆角边框

使用 border-radius 实现圆角效果：

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

边框阴影

通过 box-shadow 添加阴影效果：

box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);  
/* 水平偏移 | 垂直偏移 | 模糊半径 | 颜色 */  

渐变边框

结合 border-image 和渐变实现复杂边框：

border: 2px solid transparent;  
border-image: linear-gradient(to right, red, blue) 1;  

虚线边框自定义

通过 border-style 和 stroke-dasharray 类似效果：

border: 2px dashed;  
border-image-slice: 1;  
border-image-source: linear-gradient(to right, #000 50%, transparent 50%);  

双色边框

利用伪元素叠加实现双色边框：

.element {  
  position: relative;  
  border: 2px solid red;  
}  
.element::before {  
  content: "";  
  position: absolute;  
  inset: -4px;  
  border: 2px solid blue;  
  z-index: -1;  
}  

注意事项

• 边框会占用盒模型空间，可通过 box-sizing: border-box 调整计算方式。
• 透明边框需明确指定 transparent 关键字。