当前位置：首页 > CSS

css 渐变制作虚线

2026-03-12 03:42:06CSS

使用 CSS 渐变制作虚线

通过 CSS 的 linear-gradient 和 background-size 属性可以模拟虚线效果。这种方法适用于背景或边框，且支持自定义虚线的颜色、间距和粗细。

水平虚线

通过水平渐变和重复背景实现横向虚线：

.dashed-line {
  height: 2px; /* 虚线粗细 */
  background: linear-gradient(to right, black 50%, transparent 50%);
  background-size: 10px 2px; /* 虚线长度和粗细 */
}

to right 表示渐变方向为水平。
black 50% 定义实线部分占 50%，剩余部分透明。
background-size 控制单个虚线段的长度（10px）和高度（2px）。

垂直虚线

调整渐变方向为垂直：

.dashed-line-vertical {
  width: 2px;
  background: linear-gradient(to bottom, black 50%, transparent 50%);
  background-size: 2px 10px;
}

to bottom 表示垂直方向渐变。
background-size 中第二个值（10px）控制虚线段高度。

斜向虚线

通过角度定义斜线：

.dashed-line-diagonal {
  height: 2px;
  background: linear-gradient(45deg, black 25%, transparent 25% 75%, black 75%);
  background-size: 10px 10px;
}

45deg 设置倾斜角度。
颜色断点（25%, 75%）控制斜线密度。

虚线边框

结合伪元素实现边框虚线：

css 渐变制作虚线

.box {
  position: relative;
  width: 200px;
  height: 200px;
}
.box::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 2px dashed transparent;
  background: linear-gradient(white, white) padding-box,
              repeating-linear-gradient(45deg, black 0 5px, transparent 5px 10px) border-box;
}