如何为HTML中的<hr>元素设置渐变颜色？border方式尝试失败

架构老林

2026-5-29

给<hr>元素添加渐变边框/背景的正确方法

嗨，你之前的写法失败是因为border属性不能直接把渐变作为solid颜色值来用——linear-gradient属于图像类型的值，得用专门的属性来处理它。我给你两种可行的方案，你可以根据需求选：

方案1：用border-image实现渐变边框（保留3px边框厚度）

这种方法可以让你的3px边框呈现渐变效果，和你最初想给border加渐变的需求匹配：

#separate {
  clear: both;
  /* 先设置基础边框的宽度和样式，border-image需要依赖这个 */
  border: 3px solid transparent;
  /* 指定渐变作为边框图像源 */
  border-image-source: linear-gradient(to right, red, yellow);
  /* slice值设为1，因为渐变是矢量图，不需要切割，1就能铺满整个边框 */
  border-image-slice: 1;
}

<hr id="separate" />

方案2：用background渐变模拟渐变分隔线（更简洁）

如果不需要传统的“边框”结构，只是想要一条渐变的水平分隔线，可以直接把hr的高度设为你想要的厚度，去掉默认边框，用背景渐变来实现：

#separate {
  clear: both;
  /* 去掉默认边框 */
  border: none;
  /* 设置分隔线的高度，对应你之前的3px厚度 */
  height: 3px;
  /* 直接用背景渐变 */
  background: linear-gradient(to right, red, yellow);
}