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;
}
