Changing the color of an hr element
Changing the color of an hr element
I want to change the color of my hr
tag using CSS. The code I've tried below doesn't seem to work:
hr {
color: #123455;
}
回答1
I think you should use border-color
instead of color
, if your intention is to change the color of the line produced by <hr>
tag.
Although, it has been pointed in comments that, if you change the size of your line, border will still be as wide as you specified in styles, and line will be filled with the default color (which is not a desired effect most of the time). So it seems like in this case you would also need to specify background-color
(as @Ibu suggested in his answer).
HTML 5 Boilerplate project in its default stylesheet specifies the following rule:
hr { display: block; height: 1px;
border: 0; border-top: 1px solid #ccc;
margin: 1em 0; padding: 0; }
An article titled “12 Little-Known CSS Facts”, published recently by SitePoint, mentions that <hr>
can set its border-color
to its parent's color
if you specify hr { border-color: inherit }
.
回答2
border-color
works in Chrome and Safari.background-color
works in Firefox and Opera.color
works in IE7+.
回答3
I think this can be useful. this was simple CSS selector.
hr { background-color: red; height: 1px; border: 0; }
作者:Chuck Lu GitHub |
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识(上)
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
· 没有源码,如何修改代码逻辑?
· 全程不用写代码,我用AI程序员写了一个飞机大战
· DeepSeek 开源周回顾「GitHub 热点速览」
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了
2020-01-13 How can I manually create a authentication cookie instead of the default method?
2019-01-13 CodeWars上的JavaScript技巧积累
2019-01-13 What's the difference between using “let” and “var” to declare a variable in JavaScript?
2015-01-13 Covariance and Contravariance (C#)
2015-01-13 Excel导出失败的提示