昨天我做页面时遇到一个问题，要做一个蓝色的通栏横线，之前考虑了用border，但是页面布局就要改动，所以使用了hr了，却发现，线条默认是蓝色的，无法改变，那怎么办呢？方法/步骤1/8分步阅读

我就不新建html文档了，直接将自己的拙劣作品展现给大家了，我在div的下面添加了一个hr，标签，没有添加任何的样式，默认的效果是下图中这样的。

2/8

可以看到默认的hr是一条灰色的一个像素的，通栏的实线。我要把它的颜色变成蓝色的。

3/8

说到颜色变化，大家首先想到的都是color,但是color一般都是针对字体颜色的，线条需要用background-color,

4/8

但是单纯的将背景色设为蓝色是不够的，线条还是灰色的，我们需要给线条一个高度，也就是我们需要的1px

5/8

这样设置完后，在浏览器中可以看到线条变粗了，而且原来的灰色好像还是存在的

6/8

其实，hr是有默认的border的，我们需要将它的边框去掉，设为border:none

7/8

这样，我们再次回到浏览器中刷新一下，查看，可以看到一条蓝色的1px高的实线。

8/8

总结起来就是，给默认的hr改成我们需要的颜色时，需要将它的高度设一个值，使用背景色，并将border设为没有

注意事项

小渔原创，欢迎大家指正。

设置