当前位置：首页 > CSS

css制作线条

2026-03-11 14:30:04CSS

使用 border 属性创建线条

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

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

使用伪元素生成装饰线条

利用 ::before 或 ::after 伪元素可以创建更灵活的线条效果：

.decorative-line::after {
  content: "";
  display: block;
  height: 2px;
  background: linear-gradient(to right, red, blue);
  margin: 10px 0;
}

使用 box-shadow 实现特殊线条效果

box-shadow 可以创建多重线条或特殊样式的线条：

css制作线条

.shadow-line {
  box-shadow: 0 1px 0 0 #ccc, 0 -1px 0 0 #ccc;
}

制作虚线或点线

通过 border-style 可以定义不同的线条样式：

.dashed-line {
  border-top: 1px dashed #999;
}
.dotted-line {
  border-left: 2px dotted #333;
}

使用 SVG 创建复杂线条

对于需要复杂图案的线条，可以使用 SVG 作为背景：

css制作线条

.svg-line {
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="2"><path d="M0 1 H100" stroke="black" stroke-width="1"/></svg>');
}

制作渐变线条

CSS 渐变可以创建色彩过渡的线条效果：

.gradient-line {
  height: 3px;
  background: linear-gradient(90deg, red, yellow, green);
}

动画线条效果

结合 CSS 动画可以制作动态线条：

.animated-line {
  height: 2px;
  background: #000;
  animation: expand 2s infinite;
}
@keyframes expand {
  from { width: 0; }
  to { width: 100%; }
}