设置<hr/>颜色

最新推荐文章于 2023-04-04 09:00:00 发布
最新推荐文章于 2023-04-04 09:00:00 发布
阅读量920 收藏
点赞数
分类专栏： HTML5+CSS3+JavaScript 文章标签： color 浏览器 字体
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_24833847/article/details/56505145
版权

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

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

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

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

<div style='background-color:#000;height:1px;border:none;''>
拾光未名
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
关于hr标记在各浏览器中的问题说明
12-14
HTML中也一样，我们不常见<hr>，但一见通常就决定了能否拥用完美分割线。这里，就不附图了，直接列表供查阅吧：   正常浏览器 IE6、7 Firefox 实际高度 height + border-right-width + border-left-width ...
设置hr元素颜色
热门推荐
Inuyasha1121的专栏
07-15 4万+
说到颜色变化，大家首先想到的都是color,但是color一般都是针对字体颜色的，线条需要用background-color, 但是单纯的将背景色设为蓝色是不够的，线条还是灰色的，我们需要给线条一个高度，也就是我们需要的1px 这样设置完后，在浏览器中可以看到线条变粗了，而且原来的灰色好像还是存在的 其实，hr是有默认的border的，我们需要将它的边框去掉，设为border:none
css分隔线 颜色,分割线颜色 - Tailwind CSS 中文文档
weixin_33936194的博客
08-04 1485
divide-transparent > * + *border-color: transparent;divide-current > * + *border-color: currentColor;divide-black > * + *--tw-divide-opacity: 1;border-color: rgba(0, 0, 0, var(--tw-divide-opa...
css定义一条优雅渐变的分割线
Da_do的博客
05-18 879
<div style="background:linear-gradient(to left,#FFFFFF,#067859,#FFFFFF);height:1px;"></div> 使用background属性中的渐变参数，linear-gradient，通过参数定义渐变色，定义一个从左到右的渐变，颜色顺序为#FFFFFF-->#FF0000-->#FFFFFF，高度为1px,便可得到一条渐变过渡的分割线。 效果 ...
html分割线
antiking的专栏
03-20 9900
html 分割线(转载)                                        【分割线】一、基础代码：1、 2、align 线条位置（可选left、right、center）；width 线条长度；color 颜色；size 厚度 二、特效（效果并不是孤立的，可相互组合）1、两头渐变透明： 2、纺锤形： 
css 实现分割线
肖毕的专栏
10-26 564
div 下<div class="line title " onclick = "showks(dat,this)">查看更多</div> .title{ position: relative; text-align: center; overflow: hidden; font-size: 16px; color: #999;height: 20px;line-height: 18px; font-weight: 800;} .title::before,.ti...
HTML:超文本标题语言
05-27
horizontal 横线（分割线 <hr> break 打断,换行 <br> ※div span 标签：起到一个包裹作用，将网页分开布局，没有任何语义化 div是一个块级标签，可以设置其大小 span是一个行内元素，不能设置其大小，限定于内容的...
H5+CSS3.zip
08-06
实现空格效果，<hr />标签实现水平线； 列表标签：使用<ul><li>实现无序列表，使用<ol><li>实现有序列表； 使用<img>标签添加图片，使用<a>标签添加链接，使用table添加表格，使用thead、tbody、tfood定义表格； ...
html入门到放弃笔记
05-15
标记在使用时，用尖括号 "<>",标记的分类 1、封闭类型的标记 也称为 "双标记" , 必须成对出现 语法：<标记>内容</标记> Demo ： 1、创建 p 标记 --<p>...</p> 2、创建 div 标记 -- <div></div> 3、创建 ...
html中常用的标签总结(必看)
12-14
通常为黑体<font>设置字体、字体大小、颜色等<big><small>字体变大和字体变小<del>加删除线<code>程序码<kbd>定义键盘文本<blockquote>块引用，通常是缩进<address>地址标签<sup>上标<sub>下标<br>换行<hr>水平线 ...
一个渐变的优雅的分割线条（使用css定义）
十二哥的专栏
11-23 1万+
轻松实现一个华丽优雅的分割线条（使用css定义）
css实现分割线功能,各种各样的分割线(附效果图)
xvzhengyang的博客
07-08 1万+
css hr 分割线
设置hr标签的粗细及颜色
u014312694的专栏
07-01 5804
hr { border:0px; border-bottom:1px solid red; }
自定义设置hr的颜色
line
09-13 1万+
1、hr的颜色不能使用color来控制，要使用background-color来控制 2、hr的高度不能为 0 3,、还会有灰色的阴影，设置border:none 默认的hr样式 自定的hr样式： 附上代码： hr { height: 1px; background-color: #6EECB4; border: none; } 如有转载：请注明出处！！！！...
html 怎么设置hr的颜色,html hr标签能设置黄颜色吗
weixin_29792607的博客
07-09 8657
在HTML中，hr标签可以设置黄颜色，只需要利用hr标签的style属性添加颜色样式即可，语法格式“”。border-color属性用于给元素设置边框颜色。本教程操作环境：windows7系统、CSS3&&HTML5版、Dell G3电脑。 标签定义 HTML 页面中的主题变化(比如话题的转移)，并显示为一条水平线。 元素被用来分隔 HTML 页面中的内容(或者定义一个变化)。默认...
如何改变hr标签的颜色
u012746918的博客
03-09 6044
<hr style='background-color:blue; height:1px; border:none;''/> hr标签是线条，其颜色要用background-color； 再给线条设置一个height，正常粗细就是1px，设置完后线条变粗； 那是因为hr有默认的border，需要将它的边框去掉，设为border:none 以上三点缺一不可 ...
html分割线颜色怎么在css中写,html水平分割线 html 分割线颜色怎么变浅
weixin_34008968的博客
05-31 3300
深入理解es6和es6标准入门哪本好Dubbo的分布式系统架构实战需要哪些步骤完成HTML如何添加水平分割线:HTML提供了修饰段落的水平分割线，在很多的网页布局中都可以轻松使用，而不需要另外作图。水平分割线的标签是单标签： 默认情况下只占一行。 建站教程网-为学习HTML,DIV+CSS教程,网站开发制作与建设提供动力HTML教程建站教程网-xhtml教程提供最在html网页中插入垂直分割线我知...
css如何改变横线＜hr/＞标签的颜色
S筱潇S四维Smile
03-17 2251
<hr style='background-color:blue; height:1px; border:none;''/> hr标签是线条，其颜色要用background-color； 再给线条设置一个height，正常粗细就是1px，设置完后线条变粗； 那是因为hr有默认的border，需要将它的边框去掉，设为border:none 以上三点缺一不可 ...
VS的使用 设置一个护眼背景颜色
m0_66300397的博客
04-04 1320
打开我们的Visual Stduio，在工具中，找到“选项”，点击进入。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> p{ color:red; font-size:20px; } h2{ color:yellow; } .hello{ background: #cccccc; } .world{ font-weight:bold; } #haha{ color:blue; } </style> </head> <body> <p>welcome to css!</p> <p>hello world!</p> <h2>WEB前端开发</h2> <h3>Java开发</h3> <hr> <p class="hello">welcome to css!</p> <p>hello world!</p> <h2>WEB前端开发</h2> <h3>Java开发</h3> <div class="hello">主讲：Hector</div> <div class="world">主讲：Hector</div> <hr> <h1 id="haha">哈哈</h1> </body> </html> 能不能解释每行的意思
最新发布
07-13
<!DOCTYPE html>：声明文档类型为HTML5。 <html lang="en">：定义HTML文档的根元素，其中lang属性指定了文档的语言为英语。 <head>：定义文档的头部，包含了一些描述文档信息的元素。 <meta charset="UTF-8">：设置文档的字符编码为UTF-8，确保正确显示特殊字符。 <title>Document</title>：设置文档的标题为"Document"。 <style>：开始定义内部样式表。 p { color: red; font-size: 20px; }：选择所有的<p>元素，并设置颜色为红色，字体大小为20像素。 h2 { color: yellow; }：选择所有的<h2>元素，并设置颜色为黄色。 .hello { background: #cccccc; }：选择具有类名"hello"的元素，并设置背景颜色为#cccccc（浅灰色）。 .world { font-weight: bold; }：选择具有类名"world"的元素，并设置字体加粗。 #haha { color: blue; }：选择具有ID "haha"的元素，并设置颜色为蓝色。 </style>：结束内部样式表。 <body>：定义文档的主体部分，包含页面中的可见内容。 <p>welcome to css!</p>：创建一个段落元素，显示文本"welcome to css!"。 <p>hello world!</p>：创建一个段落元素，显示文本"hello world!"。 <h2>WEB前端开发</h2>：创建一个标题2（h2）元素，显示文本"WEB前端开发"。 <h3>Java开发</h3>：创建一个标题3（h3）元素，显示文本"Java开发"。 <hr>：创建一个水平线。 <p class="hello">welcome to css!</p>：创建一个具有类名"hello"的段落元素，显示文本"welcome to css!"。 <p>hello world!</p>：创建一个段落元素，显示文本"hello world!"。 <h2>WEB前端开发</h2>：创建一个标题2（h2）元素，显示文本"WEB前端开发"。 <h3>Java开发</h3>：创建一个标题3（h3）元素，显示文本"Java开发"。 <div class="hello">主讲：Hector</div>：创建一个具有类名"hello"的div元素，显示文本"主讲：Hector"。 <div class="world">主讲：Hector</div>：创建一个具有类名"world"的div元素，显示文本"主讲：Hector"。 <hr>：创建一个水平线。 <h1 id="haha">哈哈</h1>：创建一个具有ID "haha"的标题1（h1）元素，显示文本"哈哈"。 </body>：结束文档的主体部分。 </html>：结束HTML文档。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值