css制作边框

使用 border 属性设置基础边框

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

.element {
  border: 1px solid #000; /* 宽度1px、实线、黑色 */
}

单独控制边框各边

通过 border-top、border-right、border-bottom、border-left 分别设置：

.element {
  border-top: 2px dashed red;
  border-right: 1px dotted blue;
}

自定义边框样式

border-style 支持多种样式，如 solid（实线）、dashed（虚线）、dotted（点线）、double（双线）：

.element {
  border: 3px double #333;
}

圆角边框

使用 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);
}

透明边框

利用 transparent 或 rgba() 实现透明或半透明边框：

.element {
  border: 2px solid rgba(0, 0, 0, 0.5); /* 半透明黑色 */
}

渐变边框

结合 border-image 和渐变函数实现渐变边框：

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

边框动画

通过 CSS 动画让边框动态变化：

@keyframes border-pulse {
  0% { border-color: red; }
  50% { border-color: blue; }
  100% { border-color: red; }
}
.element {
  border: 2px solid;
  animation: border-pulse 2s infinite;
}