css 边框制作

基础边框设置

使用 border 属性可快速设置边框样式、宽度和颜色：

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

• 样式选项：solid（实线）、dashed（虚线）、dotted（点线）、double（双线）、groove（3D凹槽）等。

单边边框控制

通过 border-top、border-right、border-bottom、border-left 单独控制某一边：

.element {
  border-left: 3px dashed #ff0000;
}

圆角边框

使用 border-radius 创建圆角效果：

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

边框阴影

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

.element {
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3); /* X偏移 | Y偏移 | 模糊半径 | 颜色 */
}

渐变/图片边框

结合 border-image 实现渐变或图片边框：

.element {
  border: 10px solid;
  border-image: linear-gradient(45deg, #ff0000, #00ff00) 1;
}

透明边框技巧

利用 transparent 和 background-clip 控制边框与背景的交互：

.element {
  border: 5px solid transparent;
  background-clip: padding-box; /* 背景仅延伸到内边距 */
}