css制作线条

使用 border 属性制作线条

通过 border 属性可以轻松创建各种线条。例如，设置 border-bottom 可以生成水平线条：

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

使用伪元素创建线条

利用 ::before 或 ::after 伪元素可以灵活控制线条的位置和样式：

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

使用 box-shadow 制作线条

box-shadow 属性可以创建不占位的线条效果：

.shadow-line {
  box-shadow: 0 1px 0 0 rgba(0,0,0,0.1);
}

使用渐变背景制作线条

CSS 渐变能实现更复杂的线条效果：

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

使用 SVG 绘制线条

对于特殊线条样式（如虚线、波浪线），可以使用内联 SVG：

.svg-line {
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="2"><line x1="0" y1="1" x2="100" y2="1" stroke="black" stroke-dasharray="5,3"/></svg>');
}

制作动态线条效果

结合 CSS 动画可以实现动态线条：

.animated-line {
  height: 2px;
  background: #000;
  transform: scaleX(0);
  transition: transform 0.3s ease;
}
.animated-line:hover {
  transform: scaleX(1);
}

制作双线条效果

通过组合多个属性可以创建双线条：

.double-line {
  border-top: 1px solid #000;
  border-bottom: 1px solid #000;
  height: 5px;
  box-sizing: border-box;
}