更改hr元素的颜色

Question

我想使用CSS更改hr标记的颜色。我在下面尝试的代码似乎不起作用：

hr {
    color: #123455;
}

Answer 1

如果您打算更改border-color代码生成的行的颜色，我认为您应该使用color代替<hr>。

虽然在评论中指出，如果更改线条的大小，边框仍然会与样式中指定的一样宽，并且线条将使用默认颜色填充（这不是所需的效果大多数时候）。因此，在这种情况下，您似乎还需要指定background-color（在他的回答中建议使用@Ibu）。

HTML 5 Boilerplate 项目的默认样式表specifies项目如下：

hr { display: block; height: 1px;
    border: 0; border-top: 1px solid #ccc;
    margin: 1em 0; padding: 0; }

SitePoint最近发布的一篇名为“12 Little-Known CSS Facts”的文章提到<hr>如果您指定border-color可以将其color设置为其父级hr { border-color: inherit } {{1}}。

Answer 2

• border-color适用于 Chrome 和 Safari 。
• background-color适用于Firefox和Opera。
• color适用于 IE7 + 。

Answer 3

我认为这可能很有用。这是简单的CSS选择器。

hr { background-color: red; height: 1px; border: 0; }

Answer 4

hr {
    height: 1px;
    color: #123455;
    background-color: #123455;
    border: none;
}

这样做可以让你根据需要改变高度。祝好运。资料来源：How To Style HR with CSS

Answer 5

在Firefox，Opera，Internet Explorer，Chrome和Safari中测试过。

hr {
    border-top: 1px solid red;
}

See the Fiddle

Answer 6

只有带颜色的border-top足以使线条颜色不同。

hr {
    border-top: 1px solid #ccc;
}

Answer 7

hr {
  height:0; 
  border:0; 
  border-top:1px solid #083972; 
}

这将保持水平规则1px厚，同时也改变它的颜色

Answer 8

我认为这是最有效的方法：

<hr style="border-top: 1px solid #ccc; background: transparent;">

或者如果您喜欢在所有hr元素上执行此操作，请在CSS上写下：

hr {
    background-color: transparent;
    border-top: 1px solid #ccc;
}

Answer 9

hr
{
color: #f00;
background-color: #f00;
height: 5px;
}

Answer 10

在阅读了这里的所有答案，并看到所描述的复杂性之后，我开始进行小规模的试验，以试验人力资源。而且，结论是你可以抛弃你编写的大部分monkeypatched CSS，读取这个小primer并使用这两行纯CSS：

hr {
  border-style: solid;
  border-color: cornflowerblue; /* or whatever */
}

所有你需要设置你的HR样式。

• 适用于跨浏览器，跨设备，跨操作系统，跨英语频道，跨年龄。
• 否“我认为这会有用......”，“你需要记住Safari / IE ......”等。
• 没有额外的css - 没有height，width，background-color，color等。

只是防弹多彩的人力资源。它是 简单 ^TM 。

额外奖励：要将HR设置为某个高度H，只需将border-width设置为H/2。

Answer 11

如果你使用css类，那么它将由所有'hr'标签占用，但是如果你想要特定的'hr'使用下面的代码，即inline css

<hr style="color:#99CC99" />

如果它在chrome中不起作用，请尝试以下代码：

<hr color="red" />

Answer 12

hr
{
  background-color: #123455;
}

背景是你应该尝试改变的背景

您也可以使用边框颜色。我不确定我是否认为有这个问题存在交叉浏览器问题。你应该在不同的浏览器中测试它

Answer 13

你应该将border-width设置为0;它适用于Firefox和Chrome。

＆＃13;

＆＃13;

hr {
  clear: both;
  color: red;
  background-color: red;
  height: 1px;
  border-width: 0;
}

＆＃13;

<hr />
This is a test
<hr />

＆＃13;

＆＃13;

＆＃13;

Answer 14

这很简单，也是我最喜欢的。

const rawRequest = async (url, headers, data, timeout) => {
// Set custom User-Agent string
headers['User-Agent'] = 'Kraken Javascript API Client';

const options = { headers, timeout };

Object.assign(options, {
    method : 'POST',
    body   : qs.stringify(data),
});

const { body } = await got(url, options);
reject('reject');

const response = JSON.parse(body);

if(response.error && response.error.length) {
    const error = response.error
        .filter((e) => e.startsWith('E'))
        .map((e) => e.substr(1));

    if(!error.length) {
        throw new Error("Kraken API returned an unknown error");
    }

    throw new Error(error.join(', '));
}

return response;
};

//script
const response = rawRequest(url, headers, params, timeout);
console.log(response);

Answer 15

我正在测试IE，Firefox和Chrome 2015年5月，这对当前版本效果最佳。它以人力资源为中心，使其达到70％的宽度：

(dict( enumerate(df['x'].cat.categories ) ) == dict( zip( df['x'].cat.codes, df['x'] ) ))

# True

hr.light { 
    width:70%; 
    margin:0 auto; 
    border:0px none white; 
    border-top:1px solid lightgrey; 
}

Answer 16

有些浏览器使用color属性，有些浏览器使用background-color属性。为了安全起见：

hr{
    color: #color;
    background-color: #color;
}

Answer 17

由于我没有评论的声誉，我将在此提出一些想法。

如果你想要一个css变量高度，取下所有边框并给出背景颜色。

    hr{
        height:2px;
        border:0px;
        background:green;
        margin:0px;/*sometimes useful*/
    }
    /*Doesn't work in ie7 and below and in Quirks Mode*/

如果您只想要一个您知道可以使用的样式（例如：为大多数电子邮件客户端替换:: before元素中的边框或

    hr{
        height:0px;
        border:0px;
        border-top:2px solid blue;
        margin:0px;/*useful sometimes*/
    }

在两种方式中，如果设置宽度，它将始终具有它的大小。

无需为此设置display:block;。

为了完全安全，你可以混合两者，因为某些浏览器可能会与height:0px;混淆：

    hr{
        height:1px;
        border:0px;
        background:blue;
        border-top:1px solid blue;
        margin:0px;/*useful sometimes*/
    }

使用此方法，您可以确保它的高度至少为2px。

这是一条线，但安全是安全的。

这是你应该用来与几乎所有东西兼容的方法。

请注意：Gmail仅检测内联css，而某些电子邮件客户端可能不支持背景或边框。如果一个失败，你仍然会有1px线。总比没有好。

在最糟糕的情况下，您可以尝试添加color:blue;。

在最糟糕的情况下，您可以尝试使用<font color="blue"></font>标记并将宝贵的<hr/>标记放入其中。它将继承<font></font>标记颜色。

使用此方法，您将想要这样做：<hr width="50" align="left"/>。

示例：

    <span>
        awhieugfrafgtgtfhjjygfjyjg
        <font color="#42B3E5"><hr width="50" align="left"/></font>
    </span>
    <!--Doesn't work in ie7 and below and in Quirks Mode-->

以下链接供您查看：http://jsfiddle.net/sna2D/

Answer 18

您可以添加bootstrap bg类，例如

<hr class="bg-light" />

Answer 19

我喜欢设置 border-top 的答案，但它们在 Chrome 中仍然有点偏离...
但是如果我设置了 border-top: 1px solid black; 和 border-bottom: 0px;，我最终会得到一个真正的单行（这也适用于更高的厚度）。

Answer 20

你可以这样做：

hr {
  border: 1px solid red;
}

<hr />
This s a test
<hr />

Answer 21

使用字体颜色修改水平规则使它们更灵活，更易于使用。

默认情况下不会继承color属性，因此需要将以下内容添加到hr以允许颜色继承：

/* allow hr to inherit color */
hr { border: 1px solid;}

/* reusable colour modifier */
.fc_-alpha { color: crimson;}

normal hr:

<hr>

hr with <span class="fc_-alpha">colour modifier</span>:

<hr class="fc_-alpha">

Answer 22

您可以提供<hr noshade>代码并转到您的css文件并添加：

＆＃13;

＆＃13;

hr {
    border-top:0;
    color: #123455;
}

＆＃13;

<hr noshade />
This s a test
<hr noshade />

＆＃13;

＆＃13;

＆＃13;

Answer 23

1. 代码适用于较旧的IE

2. 尝试多种颜色

   <hr color="black">
   <hr color="blue">
   

Answer 24

通常，您不能像使用其他任何方法一样，仅使用CSS设置水平线的颜色。 首先，Internet Explorer需要CSS中的颜色如下所示：

“颜色：＃123455”

但是Opera和Mozilla需要CSS中的颜色如下所示：

“背景色：＃123455”

因此，您需要将两个选项都添加到CSS中。

接下来，您需要为水平线提供一些尺寸，否则默认为浏览器设置的标准高度，宽度和颜色。 这是您的CSS看起来像蓝色水平线的示例代码。

hr {
border: 0;
width: 100%;
color: #123455;
background-color: #123455;
height: 5px;
}

或者您可以在插入水平线时直接将样式添加到HTML页面，如下所示：

<hr style="background:#123455" />

希望这会有所帮助。

Answer 25

我以各种方式下注：

  hr {
    border-top: 1px solid purple;
    border-color: purple;
    background-color: purple;
    color: purple;
  }

Answer 26

嗯，我是HTML，CSS和Java的新手，但我尝试过在所有浏览器中都适合我的方式。我使用的是JS而不是CSS ，它不适用于某些浏览器。

首先，我将id="myHR"赋予HR元素并在Java Script中使用它。
这是守则。

x = document.getElementById("myHR");
y = x.style.width = "600px";
y = x.style.color = "white";
y = x.style.height = "2px";
y = x.style.border = "none";
y = x.style.backgroundColor = "lightgrey";

Answer 27

您可以使用CSS制作不同颜色的线条，例如：

border-left: 1px solid rgb(216, 216, 216);
border-right: medium none;
border-width: medium medium medium 2px;
border-style: none none none solid;
border-color: -moz-use-text-color -moz-use-text-color -moz-use-text-color rgb(216, 216, 216);

该代码将显示垂直灰线。

Answer 28

您也可以使用字体标记 例如

<font color="red"><hr></font>