当前位置：首页 > CSS

css制作线条

2026-01-28 07:42:28CSS

使用 border 属性制作线条

通过设置元素的 border 属性可以快速生成线条。例如，创建一个水平线：

.line {
  border-top: 1px solid #000;
  width: 100%;
}

调整 border-top 的宽度、样式和颜色可以改变线条的外观。其他方向如 border-bottom、border-left、border-right 也可用于不同方向的线条。

使用伪元素制作线条

通过 ::before 或 ::after 伪元素可以更灵活地控制线条的位置和样式：

.element::after {
  content: "";
  display: block;
  width: 50%;
  height: 2px;
  background: linear-gradient(to right, red, blue);
  margin: 10px auto;
}

这种方法适合在特定元素前后添加装饰性线条，并支持渐变效果。

使用 background 属性制作线条

通过 background 或 linear-gradient 可以创建更复杂的线条效果：

.gradient-line {
  height: 3px;
  background: linear-gradient(90deg, transparent, #ff0000, transparent);
}

这种方法适合制作渐变或虚线效果，调整参数可以控制线条的渐变方向和颜色分布。

使用 box-shadow 制作线条

box-shadow 可以生成多线条或特殊效果的线条：

.shadow-line {
  height: 1px;
  box-shadow: 0 10px 0 #000, 0 20px 0 #f00;
}

通过叠加多个阴影可以快速生成平行线，适合需要多条线条的场景。

使用 SVG 制作线条

对于复杂的线条效果（如波浪线或自定义路径），可以使用内联 SVG：

css制作线条

.svg-line {
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 10'><path d='M0,5 Q25,10 50,5 T100,5' stroke='%23000' fill='none'/></svg>");
  height: 10px;
}

SVG 线条适合需要精确控制曲线或动态效果的情况，且不会失真。