[分享]css中hr能变颜色吗

有时候我们需要在网页上添加分隔线来分割内容，标签非常适合这个目的。但是，当我们需要给分隔线添加颜色时，标签似乎失去了作用。那么，能否变颜色呢？答案是肯定的。在css中，可以使用bordercolor属...

有时候我们需要在网页上添加分隔线来分割内容，<hr>标签非常适合这个目的。但是，当我们需要给分隔线添加颜色时，<hr>标签似乎失去了作用。那么，<hr>能否变颜色呢？

答案是肯定的。在css中，可以使用border-color属性来改变<hr>标签的颜色。具体实现方法如下：

 hr {
    border-top: 1px solid #000; /*添加顶部边框*/
    border-color: red; /*改变颜色为红色*/
  }

其中，border-top属性用来添加一条顶部边框，这是为了防止某些浏览器下<hr>标签样式的失真。border-color属性用来改变<hr>标签的颜色，这里设置为红色。你也可以使用其他颜色来代替这里的red。

为了使效果更明显，我们还可以给<hr>标签添加一些其他的样式，例如：

 hr {
    border-top: 1px solid #000;
    border-color: red;
    margin: 20px 0; /*添加外边距*/
    width: 50%; /*设置宽度为50%*/
  }

这样，<hr>标签就具备了更醒目的样式。总之，在css中，<hr>标签是可以变颜色的，只需要使用border-color属性即可。