hr标签---中心线:设置颜色

来源:csdn博客 分类: 文章浏览史 发布时间:2020-09-10 17:09:30 最后更新:2020-09-10 浏览:107
转载声明:
本文为摘录自“csdn博客”,版权归原作者所有。
温馨提示:
为了更好的体验,请点击原文链接进行浏览
摘录时间:
2020-09-10 17:09:30
  1. 可以看到默认的hr是一条灰色的一个像素的,通栏的实线。我要把它的颜色变成蓝色的。

    怎样设置hr横线的颜色

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

    怎样设置hr横线的颜色

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

    怎样设置hr横线的颜色

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

    怎样设置hr横线的颜色

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

    怎样设置hr横线的颜色

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

    怎样设置hr横线的颜色

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

  8. 代码:

    <hr style="background-color: red;border: none;height: 2px;opacity: .1;width: 50%" />
    
php技术微信