更改线hr的颜色

Posted 2023-05-08

【中文标题】更改线hr的颜色

【英文标题】：Change colour of line hr

【发布时间】：2015-08-12 22:36:29

【问题描述】：

这是我的网站.. 我需要第三部分的那条线是黑色的.. 我使用了 hr 标签并将它的样式设置为 css 上的白色，因为它之后的页面我需要它是白色的？那么我如何以不同的方式设计它们？抱歉，我是 html/css 新手！

请帮忙！

http://opax.swin.edu.au/~9991042/DDM10001/brief_2/Amalfi%20Coast/www_root/

<div id="con2">

<div id="box3">
<span class="fontheading">RESEARCH, PLAN AND SAVE  </span> <br><hr /><br>
<span class="font1"> You&#39;ll collect all of <br>your favourite <br>
Amalfi activities <br>and attractions <br>in one place </span>
<br><br><span class="font2">Just sign up<br>for your free<br>account 
<a href="#">here</a></span>
 </div>
 </div>

CSS

 hr  width:100%; height:1px; background: #fff 

【参考方案1】：

<hr> 使用 border，而不是 background-color。事实上，它的四面八方都有边界。我通常通过在设置border-bottom-* 属性之前设置border-width: 0px; 来覆盖它

hr 
    border-width: 0px;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: #FFF;

我如何为它们设置不同的样式？

将您想要更改的<hr>标签附加到一个类。

<hr class="white">

然后仅将 css 应用于该类

hr.white 
    border-width: 0px;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: #FFF;

您可以通过更改line-height 属性的值来更改<hr> 标记垂直占用的空间量。

hr.white 
    line-height: 1px;
    border-width: 0px;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: #FFF;

【参考方案2】：

为不同的hr标签添加不同的类，例如：<hr class='hr-black'/>然后在CSS中改变颜色。

【讨论】：

这是你应该这样做的方式。每种颜色都有不同的类hr。