css 边框制作

边框基础样式

使用 border 属性可以快速定义边框的宽度、样式和颜色。例如：

.box {
  border: 2px solid #ff0000; /* 宽度2px，实线，红色 */
}

• 宽度支持 thin、medium、thick 或具体像素值（如 3px）。
• 样式可选：solid（实线）、dashed（虚线）、dotted（点线）、double（双线）等。

单边边框控制

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

.box {
  border-top: 1px dashed #00f;
  border-bottom: 3px double #0f0;
}

圆角边框

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

.circle {
  border-radius: 50%; /* 圆形 */
}
.rounded {
  border-radius: 10px; /* 统一圆角 */
}
.custom {
  border-radius: 5px 10px 15px 20px; /* 左上、右上、右下、左下 */
}

边框阴影

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

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

渐变边框

结合 background-clip 和 background-image 实现渐变边框：

.gradient-border {
  border: 4px solid transparent;
  background-clip: padding-box;
  background-image: linear-gradient(to right, #f00, #00f);
}

边框图片

使用 border-image 用图片作为边框：

.image-border {
  border: 10px solid transparent;
  border-image: url('border.png') 30 round;
}

透明边框

设置 transparent 或 rgba() 实现透明效果：

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

响应式边框

通过媒体查询调整不同屏幕下的边框样式：

.responsive {
  border: 1px solid #000;
}
@media (max-width: 768px) {
  .responsive {
    border-width: 2px;
  }
}