🎨 使用CSS定义水平线 ✨

在网页设计中，有时我们需要在页面上添加一条简洁的水平线来分隔内容或增加视觉效果。幸运的是，CSS 提供了多种方法来创建这种水平线。接下来，让我们一起探索如何用 CSS 来实现这一功能吧！🌈

首先，我们可以通过 `

```css

hr {

border: 1px solid ccc; / 设置线条的颜色和粗细 /

margin: 20px 0; / 调整上下间距 /

}

```

此外，如果你想要创建一个更具创意的水平线，不妨试试伪元素 `::before` 或 `::after`。通过设置背景渐变或是添加装饰性的图标，可以使水平线看起来更加独特且吸引人。🌟

```css

hr.custom-line::before {

content: "";

display: block;

width: 100%;

height: 1px;

background: linear-gradient(to right, ff6b6b, feca57); / 渐变色 /

position: relative;

top: -5px;

}

```

以上就是使用 CSS 定义水平线的一些小技巧。希望这些方法能帮助你更好地美化你的网页！🚀

CSS WebDesign HorizontalLine