自定义设置hr的颜色

最近在写项目的时候遇到一个地方需要将hr的颜色设置为红色，
hr默认是一条灰色的一个像素的;
首先想到的是color属性，但是设置了并没有用，因为color一般都是针对字体颜色的，线条需要用background-color；但是当我设置了background-color : red时，线条仍然是灰色的，所以我们需要给线条一个高度，也就是1px；此时hr是这样的：

设置完后，在浏览器中可以看到原来的灰色还是存在的；
原来，hr是有默认的border的，我们需要将它的边框去掉，设为border:none；
这样就OK啦！