CSS虚线边框制作教程

偷偷努力，悄无声息地变强，然后惊艳所有人！哈哈，小伙伴们又来学习啦~今天我将给大家介绍《CSS画虚线边框教程》，这篇文章主要会讲到等等知识点，不知道大家对其都有多少了解，下面我们就一起来看一吧！当然，非常希望大家能多多评论，给出合理的建议，我们一起学习，一起进步！

最直接画虚线用border-style: dashed，但需精确控制时推荐border-image或SVG。1. border-style: dashed生成默认虚线，快捷但不可控；2. border-image结合repeating-linear-gradient可自定义虚线长度、间距；3. SVG通过stroke-dasharray实现复杂图案，支持矢量缩放，适合高精度设计需求。

CSS中画虚线最直接的方法是使用border-style: dashed;，它能快速生成一个默认的虚线边框。但如果想要更精细地控制虚线的长度、间距、甚至不同的虚线模式，比如点划线或者更复杂的图案，我们就需要借助border-image或者将SVG作为背景图来实现高度自定义。在我看来，虽然基础的dashed很方便，但在追求设计细节和跨浏览器一致性时，高级技巧才是真正的利器。

解决方案

要画虚线，最基础的办法就是利用CSS的border-style属性。但如果想玩得更花哨，更灵活，就得请出border-image或者直接用SVG来做背景。

1. 基础虚线：border-style: dashed;

这是最简单、最直接的方式。你只需要给元素的border-style设置为dashed就行。

.dashed-box {
  border: 2px dashed #333;
  padding: 20px;
  width: 200px;
  height: 100px;
  text-align: center;
}

这种方法非常快，但它的缺点也很明显：你无法控制虚线的长度和间距，浏览器会根据自己的算法来渲染，不同浏览器之间可能会有细微的差异。

2. 高级定制：border-image

border-image是一个非常强大的属性，它可以让你用一张图片（或者渐变）作为边框。通过巧妙地构造这张“图片”，我们就能实现各种自定义的虚线效果。

核心思路是创建一个包含虚线图案的渐变图像，然后用border-image-slice和border-image-repeat来控制它的展示。

.custom-dashed-border-image {
  border: 5px solid transparent; /* 边框宽度必须有，且颜色不重要，因为会被图片覆盖 */
  border-image: linear-gradient(to right, #333 50%, transparent 50%) 1 / 5px 0 / 0 stretch;
  border-image-slice: 1; /* 关键：不切片，整个图片作为边框 */
  border-image-repeat: repeat; /* 让图案重复 */
  /*
    更详细的 border-image 简写属性解释：
    border-image: <'border-image-source'> || <'border-image-slice'> [ / <'border-image-width'>? [ / <'border-image-outset'> ]? ]? || <'border-image-repeat'>?
    这里是：
    linear-gradient(to right, #333 50%, transparent 50%) (source)
    1 (slice)
    / 5px 0 (width: top/bottom 5px, left/right 0)
    / 0 (outset)
    stretch (repeat: here it's repeat, not stretch)
    实际上，对于虚线，我们通常需要 repeat。
  */
  border-image: linear-gradient(to right, #333 50%, transparent 50%) 1 repeat; /* 更简洁的写法 */
  border-image-slice: 1; /* 这行是关键，确保整个渐变作为边框 */
  border-image-width: 5px; /* 边框的宽度 */
  border-image-repeat: repeat; /* 让渐变重复 */

  padding: 20px;
  width: 200px;
  height: 100px;
  text-align: center;
}

/* 更好的 border-image 虚线示例，控制虚线和间距 */
.custom-dashed-gradient {
  border: 5px solid transparent; /* 边框宽度 */
  border-image: repeating-linear-gradient(
    90deg,
    #333 0 10px, /* 虚线长度 10px */
    transparent 10px 20px /* 间距 10px */
  ) 1 stretch; /* slice 1, repeat stretch (等同于 repeat) */
  /* 或者这样写更清晰： */
  /* border-image-source: repeating-linear-gradient(90deg, #333 0 10px, transparent 10px 20px); */
  /* border-image-slice: 1; */
  /* border-image-width: 5px; */
  /* border-image-repeat: stretch; */ /* 这里用 stretch 会根据边框拉伸，repeat 更适合虚线 */

  /* 针对虚线，我个人更倾向于使用 repeat */
  border-image: repeating-linear-gradient(
    90deg,
    #333 0 10px,
    transparent 10px 20px
  ) 1 repeat;

  padding: 20px;
  width: 200px;
  height: 100px;
  text-align: center;
  margin-top: 20px;
}

3. 终极自由：SVG背景图

如果说border-image是高级定制，那SVG就是艺术创作了。你可以用SVG画出任何你想要的虚线图案，然后把它作为元素的背景图。这种方式的优势在于，你可以精确控制每一个点的形状、大小、颜色，而且SVG是矢量图，无论放大缩小都不会失真。

.svg-dashed-border {
  /* 创建一个简单的SVG虚线图案 */
  background-image: url("data:image/svg+xml,%3Csvg width='10' height='2' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='5' height='2' fill='%23333'/%3E%3C/svg%3E");
  background-repeat: repeat-x; /* 水平重复 */
  background-position: left top, left bottom; /* 放置在顶部和底部 */
  background-size: 100% 2px; /* 控制虚线的高度 */
  /* 垂直虚线需要额外的背景图或伪元素 */
  padding: 20px;
  width: 200px;
  height: 100px;
  text-align: center;
  margin-top: 20px;
  position: relative; /* 用于伪元素定位 */
}

/* 如果需要四条边都是虚线，且样式统一，可以使用伪元素 */
.svg-dashed-border::before,
.svg-dashed-border::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background-image: url("data:image/svg+xml,%3Csvg width='10' height='2' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='5' height='2' fill='%23333'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
}

.svg-dashed-border::before {
  top: 0;
}

.svg-dashed-border::after {
  bottom: 0;
}

.svg-dashed-border .vertical-line-left,
.svg-dashed-border .vertical-line-right {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background-image: url("data:image/svg+xml,%3Csvg width='2' height='10' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='2' height='5' fill='%23333'/%3E%3C/svg%3E");
  background-repeat: repeat-y;
}

.svg-dashed-border .vertical-line-left {
  left: 0;
}

.svg-dashed-border .vertical-line-right {
  right: 0;
}

这种SVG方案，如果只是简单的四边虚线，用border-image可能更简洁。但如果虚线图案本身很复杂，或者需要动态变化，SVG就显得非常灵活了。

为什么简单的border-style: dashed;有时不够用？

说实话，border-style: dashed;在很多情况下是足够了，它实现起来最快。但作为一个有点追求的设计师或者开发者，你很快就会发现它的局限性。

首先，它对虚线的“点”和“间距”的控制几乎是零。浏览器有自己的一套算法来渲染dashed边框，通常是根据边框宽度自动调整点和间距的比例。这意味着你无法指定“我想要一个5px长的虚线，然后是3px的间距”。这种不确定性在像素完美的UI设计中简直是噩梦。有时候，你会发现虚线在不同的浏览器、不同的缩放级别下，甚至在同一个浏览器但元素尺寸略有不同时，都会呈现出不一样的效果。这真的让人头疼，尤其是当你试图让设计稿和实际效果完全一致的时候。

再者，dashed的样式相对单一。它只能是简单的矩形点状虚线。如果你的设计要求是圆形虚线、三角形虚线，或者更复杂的点划线模式，那dashed就彻底歇菜了。它无法满足这些创意性的需求。在我看来，这种“一刀切”的方案，在如今高度定制化的网页设计趋势下，显得有些力不从心了。当设计系统对虚线有严格的规范时，border-style: dashed;几乎是无法满足要求的。

如何利用border-image实现高度自定义的虚线效果？

border-image这玩意儿，初看起来有点复杂，但一旦你掌握了它的精髓，你会发现它简直是虚线定制的瑞士军刀。它允许你用一张图片（或者说，更常用的是CSS渐变）来作为元素的边框。关键在于怎么构造这张“图片”和怎么“切片”及“重复”它。

我们通常会用repeating-linear-gradient来生成虚线图案。比如，如果你想要一个10px长的实线，然后接10px的透明间距，你可以这样写：

.border-image-example {
  border: 5px solid transparent; /* 必须有边框宽度，但颜色不重要 */
  border-image: repeating-linear-gradient(
    90deg, /* 渐变方向，90deg表示水平方向 */
    #f00 0 10px, /* 从0到10px是红色实线 */
    transparent 10px 20px /* 从10px到20px是透明，形成间距 */
  ) 1 repeat; /* slice 1表示不切片，整个渐变作为边框；repeat表示重复 */

  width: 250px;
  height: 150px;
  padding: 20px;
  box-sizing: border-box;
  text-align: center;
  line-height: 100px;
  font-family: sans-serif;
  color: #333;
  margin: 20px auto;
}

这里面的repeating-linear-gradient(90deg, #f00 0 10px, transparent 10px 20px)，它会生成一个每20px循环一次的图案：前10px是红色，后10px是透明。90deg确保这个图案是水平方向的。

然后是border-image的简写属性：

• repeating-linear-gradient(...)：这是border-image-source，也就是我们的虚线图案来源。
• 1：这是border-image-slice。1意味着我们不进行任何切片，整个源图像都用于边框。对于虚线，我们通常就是想让整个图案重复，所以1是最常见的选择。
• repeat：这是border-image-repeat。它告诉浏览器如何填充边框区域。repeat会平铺我们的渐变图案，直到填满整个边框。你也可以用round（调整图案大小以完整显示）或stretch（拉伸图案以填满），但对于虚线，repeat通常是最佳选择，因为它能保持虚线和间距的固定比例。

通过调整repeating-linear-gradient中的颜色、长度和透明度，你几乎可以创造出任何你想要的虚线模式。比如，想要点划线，可以这样：

.dot-dash-border-image {
  border: 4px solid transparent;
  border-image: repeating-linear-gradient(
    90deg,
    #007bff 0 4px, /* 点 */
    transparent 4px 8px, /* 点间距 */
    #007bff 8px 18px, /* 划 */
    transparent 18px 22px /* 划间距 */
  ) 1 repeat;
  width: 250px;
  height: 150px;
  padding: 20px;
  box-sizing: border-box;
  text-align: center;
  line-height: 100px;
  font-family: sans-serif;
  color: #333;
  margin: 20px auto;
}

这种方法非常灵活，而且浏览器兼容性也相当不错（除了IE9及以下）。我觉得，掌握了border-image，你对CSS边框的控制力就上了一个台阶。

SVG与CSS结合，打造无限可能的虚线样式

当border-image也无法满足你天马行空的创意时，SVG就该登场了。SVG（可缩放矢量图形）允许你用XML语法定义二维图形，这意味着你可以画出任何复杂的路径、形状，并对其进行精确的样式控制。我们可以把这些SVG图形直接嵌入到CSS中作为背景图片，或者用mask等属性来实现更高级的效果。

最常见的做法是创建一个包含虚线图案的SVG，然后将其编码成Data URI，作为background-image的值。SVG的stroke-dasharray属性是实现虚线的核心。它定义了描边（stroke）的虚线模式：一个数字序列，表示实线长度和间隙长度交替出现。

比如，一个简单的5px实线，5px间距的虚线：

这段SVG代码定义了一个宽10px、高2px的画布，并在其中画了一条从(0,1)到(10,1)的直线。stroke="#333"设置颜色，stroke-width="2"设置粗细，最关键的是stroke-dasharray="5,5"，它让这条线变成了5px实线、5px间隙的虚线。

为了在CSS中使用，我们需要把这段SVG编码成Data URI。有很多在线工具可以做这个，或者手动编码（例如空格变%20，#变%23等）。

.svg-custom-dashed {
  position: relative;
  width: 250px;
  height: 150px;
  padding: 20px;
  box-sizing: border-box;
  text-align: center;
  line-height: 100px;
  font-family: sans-serif;
  color: #333;
  margin: 20px auto;
  /* 清除默认边框，使用伪元素模拟边框 */
  border: none;
}

/* 使用伪元素创建顶部和底部的虚线 */
.svg-custom-dashed::before,
.svg-custom-dashed::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 2px; /* 虚线的高度 */
  background-image: url("data:image/svg+xml,%3Csvg width='10' height='2' xmlns='http://www.w3.org/2000/svg'%3E%3Cline x1='0' y1='1' x2='10' y2='1' stroke='%23333' stroke-width='2' stroke-dasharray='5%2C5'/%3E%3C/svg%3E");
  background-repeat: repeat-x; /* 水平重复 */
}

.svg-custom-dashed::before {
  top: 0;
}

.svg-custom-dashed::after {
  bottom: 0;
}

/* 使用伪元素创建左侧和右侧的虚线 */
.svg-custom-dashed .vertical-line-left,
.svg-custom-dashed .vertical-line-right {
  content: ''; /* 这里不能用 content:'' 因为已经是一个 div 了，所以需要一个真实的元素 */
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px; /* 虚线的宽度 */
  background-image: url("data:image/svg+xml,%3Csvg width='2' height='10' xmlns='http://www.w3.org/2000/svg'%3E%3Cline x1='1' y1='0' x2='1' y2='10' stroke='%23333' stroke-width='2' stroke-dasharray='5%2C5'/%3E%3C/svg%3E");
  background-repeat: repeat-y; /* 垂直重复 */
}

.svg-custom-dashed .vertical-line-left {
  left: 0;
}

.svg-custom-dashed .vertical-line-right {
  right: 0;
}

这种方法提供了无与伦比的控制力。你可以创建任何形状的“点”（比如圆形、星形），任何复杂的重复模式。因为SVG是矢量图，所以缩放不会有任何失真，完美适应高DPI屏幕。缺点是，对于简单的虚线，代码量可能会略大，而且管理Data URI字符串也稍显繁琐。不过，对于那些对设计细节有极致追求的项目，SVG绝对是值得投入的。它不仅仅是画虚线，更像是给你的UI元素披上了一层定制的艺术外衣。

虚线在实际项目中的常见应用场景与注意事项

虚线在网页设计中扮演着很多角色，不仅仅是装饰。

常见应用场景：

• 分隔线： 最常见的用途，比如在内容块之间、菜单项之间，用一条细虚线来暗示内容的逻辑分离，但又不想用实线显得太生硬。
• 表单输入框： 有些设计会给输入框一个虚线边框，尤其是在用户输入时，或者表示这是一个可选的输入字段。
• 拖拽区域指示： 当你需要用户拖拽文件或元素到特定区域时，一个动态的虚线边框（通常在hover或drag-over时出现）能清晰地指示可交互区域。这能提供很好的视觉反馈。
• 加载动画或占位符： 有时候，虚线可以用来模拟内容的轮廓，作为骨架屏的一部分，或者在内容加载时显示一个临时的边框。
• 图表或数据可视化： 在某些图表中，虚线可能代表预测值、平均值或者次要的数据系列，以区分主要数据。

注意事项：

• 可访问性： 虚线通常比实线“弱”，所以在用于传达重要信息（比如错误状态）时，要确保其对比度足够高，或者辅以其他视觉提示（如颜色、图标或文本）。单纯的细虚线可能对视力不佳的用户不太友好。
• 性能： 过于复杂的border-image（尤其是包含大量颜色变化的渐变）或者非常大的SVG Data URI可能会对页面渲染性能产生轻微影响。虽然通常不是大问题，但在移动端或低性能设备上仍需留意。
• 浏览器兼容性： border-style: dashed;兼容性最好。border-image在现代浏览器中支持良好，但旧版IE（IE9及以下）不支持。SVG作为背景图的方案兼容性也很好，但Data URI的长度限制在某些老旧环境可能存在。确保为不支持的浏览器提供优雅降级方案，比如回退到border-style: dashed;或者实线。
• **响应式设计

本篇关于《CSS虚线边框制作教程》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！