<hr/>标签CSS样式失效：无法设置红色线条

你遇到的问题是因为color属性对<hr>标签的颜色控制在现代浏览器中并不直接生效，多数浏览器里<hr>的外观是由边框或背景样式决定的，而不是color属性。以下是几种可靠的解决方法：

方法一：使用border-color设置颜色 #

hr {
  border-color: red;
  margin-top: 2em;
  margin-bottom: 2em;
}

若浏览器默认<hr>的边框样式为inset（会呈现渐变效果），可以加上border-style: solid让颜色更纯粹：

hr {
  border-color: red;
  border-style: solid;
  margin-top: 2em;
  margin-bottom: 2em;
}

方法二：通过背景色+高度实现实心红线 #

这种方式可以完全自定义分隔线的粗细和颜色：

hr {
  height: 2px; /* 控制分隔线粗细 */
  background-color: red;
  border: none; /* 去掉默认边框 */
  margin-top: 2em;
  margin-bottom: 2em;
}

至于margin-top和margin-bottom能生效，是因为这两个属性属于盒模型布局属性，不受<hr>颜色渲染机制的影响，所以可以正常作用。

内容的提问来源于stack exchange，提问作者Mahdi