怎样设置hr横线的颜色

 时间:2024-10-17 22:47:44

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

怎样设置hr横线的颜色

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

怎样设置hr横线的颜色

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

怎样设置hr横线的颜色

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

怎样设置hr横线的颜色

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

怎样设置hr横线的颜色

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

怎样设置hr横线的颜色

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

怎样设置hr横线的颜色

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

  • HTML网页怎样获取input的值
  • a标签的下划线怎么去掉
  • css中如何实现button垂直居中
  • HTML怎么添加滚动条
  • HTML怎么实现网页跳转
  • 热门搜索
    美丽家园手抄报内容 古诗词手抄报 小学生健康手抄报 元旦手抄报资料 手抄报主题 万圣节手抄报图片 小学生安全手抄报图 环保手抄报资料大全 关于数学知识的手抄报 放飞梦想手抄报素材