css 渐变制作虚线
CSS 渐变制作虚线的方法
使用 CSS 线性渐变（linear-gradient）和背景尺寸（background-size）可以模拟虚线效果。以下是一种常见实现方式：
水平虚线
.dashed-line {
height: 1px;
background: linear-gradient(to right, black 0%, black 50%, transparent 50%);
background-size: 10px 1px;
}linear-gradient定义从左到右的渐变，前 50% 为黑色，后 50% 透明background-size控制单个虚线段的宽度（10px）和高度（1px）
垂直虚线
.dashed-line-vertical {
width: 1px;
background: linear-gradient(to bottom, black 0%, black 50%, transparent 50%);
background-size: 1px 10px;
}自定义虚线样式
调整以下参数可改变虚线外观：
.custom-dash {
height: 2px;
background: linear-gradient(
to right,
#333 0%,
#333 30%,
transparent 30%
);
background-size: 20px 100%;
}- 修改百分比值（30%）可调整实线部分长度
- 修改
background-size的宽度（20px）控制虚线间隔
多重渐变复杂虚线
.complex-dash {
height: 3px;
background:
linear-gradient(to right, red 0%, red 50%, transparent 50%),
linear-gradient(to right, blue 50%, blue 100%, transparent 100%);
background-size: 20px 100%;
}此例创建红蓝交替的虚线效果
注意事项
- 该方法创建的"虚线"实际上是背景图案的重复
- 传统边框虚线属性
border-style: dashed在不同浏览器中渲染效果可能不一致 - 渐变方法能提供更精确的虚线样式控制
以上方法均不需要额外 HTML 元素，纯 CSS 实现，适合作为分隔线等装饰性元素使用。
