css虚线边框样式自定义间隔和长度

/* 自定义虚线边框的间隔和长度 */

/* 使用 border-style: dashed; 创建虚线边框 */
/* 通过调整 border-width 和 border-color 来改变虚线的外观 */
/* 使用 background-clip 和 padding 来实现自定义虚线的间隔和长度 */

.box {
  width: 300px;
  height: 100px;
  border: 5px dashed #000;
  background-clip: padding-box;
  padding: 10px;
}

/* 如果需要更精确地控制虚线的间隔和长度，可以使用 SVG 或者 CSS 的 linear-gradient 实现 */

.box-custom-dashed {
  width: 300px;
  height: 100px;
  border: none;
  background: 
    linear-gradient(90deg, transparent 0, transparent 10px, #000 10px, #000 20px) repeat-x 0 0 / 40px 5px,
    linear-gradient(90deg, transparent 0, transparent 10px, #000 10px, #000 20px) repeat-x 0 100% / 40px 5px,
    linear-gradient(0deg, transparent 0, transparent 10px, #000 10px, #000 20px) repeat-y 0 0 / 5px 40px,
    linear-gradient(0deg, transparent 0, transparent 10px, #000 10px, #000 20px) repeat-y 100% 0 / 5px 40px;
  background-color: white;
}

解释说明：

1. 基本虚线边框：

   • .box 类使用了 border: 5px dashed #000; 来创建一个宽度为 5px 的黑色虚线边框。
   • background-clip: padding-box; 确保背景颜色不会延伸到边框区域，使虚线效果更加明显。

2. 自定义虚线边框：

   • .box-custom-dashed 类使用了 linear-gradient 来创建自定义的虚线边框。
   • 每个 linear-gradient 定义了一个方向（水平或垂直）的渐变，其中透明部分和实心部分交替出现，形成虚线效果。
   • repeat-x 和 repeat-y 使渐变在水平和垂直方向上重复，从而形成完整的边框。
   • 40px 是虚线的总长度，10px 和 20px 分别是虚线段和间隔的长度。

这种方式可以精确控制虚线的间隔和长度，适用于需要高度定制化的情况。