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:  ||  [ / ? [ /  ]? ]? || ?    这里是：    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渐变）来作为元素的边框。关键在于怎么构造这张“图片”和怎么“切片”及“重复”它。

LibLibAI

国内领先的AI创意平台，以海量模型、低门槛操作与“创作-分享-商业化”生态，让小白与专业创作者都能高效实现图文乃至视频创意表达。

159 查看详情

我们通常会用

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怎么画虚线_CSS虚线边框与自定义虚线样式教程的详细内容，更多请关注创想鸟其它相关文章！