css 制作虚线

制作虚线的方法

使用 border-style 属性可以轻松创建虚线边框。通过设置 border-style: dashed;，元素的边框将显示为虚线。

.element {
  border: 2px dashed #000;
}

自定义虚线样式

通过 border 和 background 结合，可以创建更灵活的虚线效果。例如，使用线性渐变背景模拟虚线。

.element {
  background: linear-gradient(to right, #000 50%, transparent 50%);
  background-size: 10px 2px;
  background-repeat: repeat-x;
  height: 2px;
}

虚线间隔调整

调整 border 的宽度和颜色可以改变虚线的外观。较大的宽度和鲜明的颜色会让虚线更明显。

.element {
  border: 3px dashed #ff0000;
}

仅显示部分边框虚线

若只需某一边显示虚线，可以通过指定边框方向实现。例如，仅底部边框为虚线。

.element {
  border-bottom: 2px dashed #000;
}

使用伪元素创建虚线

通过 ::before 或 ::after 伪元素，可以在元素内部或外部添加自定义虚线。

.element::after {
  content: "";
  display: block;
  border-top: 2px dashed #000;
  margin-top: 10px;
}

虚线动画效果

结合 CSS 动画，可以让虚线产生动态效果，例如闪烁或移动。

.element {
  border: 2px dashed #000;
  animation: blink 1s infinite;
}

@keyframes blink {
  50% { border-color: transparent; }
}