关于html：更改hr元素的颜色


Changing the color of an hr element

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

1
2
3
hr {
    color: #123455;
}
相关讨论

如果你想改变由标签产生的线条的颜色，我认为你应该使用border-color而不是color。

尽管在注释中已经指出，如果更改线条的大小，边框仍将与样式中指定的宽度相同，并且线条将填充默认颜色(大多数情况下这不是所需的效果)。因此，在这种情况下，您似乎还需要指定background-color(正如@ibu在他的回答中建议的那样)。

默认样式表中的HTML 5样板项目指定以下规则：

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

SitePoint最近发表的一篇题为"12个鲜为人知的CSS事实"的文章提到，如果指定hr { border-color: inherit }，可以将其border-color设置为其父的color。

相关讨论

  • border-color在Chrome和Safari中工作。
  • background-color在firefox和opera中工作。
  • color在IE7+中工作。
相关讨论

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

1
hr { background-color: red; height: 1px; border: 0; }
相关讨论

1
2
3
4
5
6
hr {
    height: 1px;
    color: #123455;
    background-color: #123455;
    border: none;
}

这样做可以让你在需要的时候改变高度。祝你好运。资料来源：如何用CSS设计人力资源

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

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

看小提琴。

只有带颜色的边框顶部才足以使线条具有不同的颜色。

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

这将使水平尺保持1px厚，同时改变其颜色。

相关讨论

1
2
3
4
5
6
hr
{
color: #f00;
background-color: #f00;
height: 5px;
}

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

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

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

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

在阅读了这里所有的答案，并看到了所描述的复杂性之后，我开始了一个小小的人力资源实验转移。结论是，你可以扔掉大部分你写的MonkeyPatched CSS，阅读这篇小的入门文章，仅仅使用这两行纯CSS：

1
2
3
4
hr {
  border-style: solid;
  border-color: cornflowerblue; /* or whatever */
}

这就是你为自己的人事安排所需要的一切。

  • 工作跨浏览器，跨设备，跨操作系统，跨英语频道，跨年龄。
  • 不，"我认为这会起作用……"，"你需要记住旅行/ie……"等等。
  • 没有额外的CSS-不涉及height、width、background-color、color等。

只是防弹彩色小时。就是那个傻瓜。

奖金：为了给人力资源部一个高度H，只需将border-width设置为H/2。

相关讨论

1
2
3
4
hr
{
  background-color: #123455;
}

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

也可以使用边框颜色。我不确定是否存在跨浏览器问题。您应该在不同的浏览器中测试它

相关讨论

如果你使用CSS类，那么它将被所有的"hr"标记所占用，但是如果你想要一个特定的"hr"，使用下面的代码，即内联CSS。

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

如果它不能在Chrome中工作，请尝试以下代码：

1
<hr color="red" />
相关讨论

您应该将border width设置为0；它在firefox和chrome中很好地工作。

1
2
3
4
5
6
7
hr {
  clear: both;
  color: red;
  background-color: red;
  height: 1px;
  border-width: 0;
}
1
2
3
<hr />
This is a test
<hr />

我正在测试IE、火狐和Chrome，2015年5月，这个版本最适合当前版本。它使人力资源中心化，使其70%宽：

1
2
3
4
5
6
hr.light {
    width:70%;
    margin:0 auto;
    border:0px none white;
    border-top:1px solid lightgrey;
}
1
<hr class="light" />

相关讨论

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

10

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

1
2
3
4
hr{
    color: #color;
    background-color: #color;
}

因为我没有什么好评论的，我会给大家一些建议。

如果你想要一个CSS的可变高度，去掉所有的边框，给一个背景色。

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

如果您只需要一个您知道可以工作的样式(例如：为大多数电子邮件客户端替换：：before元素中的边框，或者

1
2
3
4
5
6
    hr{
        height:0px;
        border:0px;
        border-top:2px solid blue;
        margin:0px;/*useful sometimes*/
    }

在这两种情况下，如果设置一个宽度，它将始终具有它的大小。

无需为此设置display:block;。

为了完全安全，您可以将两者混合使用，因为有些浏览器可能会与height:0px;混淆：

1
2
3
4
5
6
7
    hr{
        height:1px;
        border:0px;
        background:blue;
        border-top:1px solid blue;
        margin:0px;/*useful sometimes*/
    }

通过这种方法，你可以确定它的高度至少是2倍。

这更像是一条线，但安全就是安全。

这是您应该用来兼容几乎所有内容的方法。

记住：Gmail只检测内联CSS，有些电子邮件客户端可能不支持背景或边框。如果有一条失败了，你仍然有一条1px的线。总比什么都没有好。

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

在最坏的情况下，您可以尝试使用标签，并将您宝贵的

标签放在里面。它将继承标记颜色。

使用这种方法，您将希望这样做：

。

例子：

1
2
3
4
5
    <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/

我每次都下注：

1
2
3
4
5
6
  hr {
    border-top: 1px solid purple;
    border-color: purple;
    background-color: purple;
    color: purple;
  }

我是新的HTML，CSS和Java，但我尝试了我的方式，在所有浏览器中为我工作。我使用的是JS而不是CSS，它不适用于某些浏览器。

首先，我将EDCOX1对20的元素赋予了HR元素，并将其应用到Java脚本中。< BR>这是密码。

1
2
3
4
5
6
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";

  • 代码适用于旧的IE

  • 尝试了多种颜色

    1
    2
    <hr color="black">
    <hr color="blue">
    • 相关讨论

    您可以使用CSS生成不同颜色的线条，示例如下：

    1
    2
    3
    4
    5
    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);

    该代码将显示垂直灰线。

    您可以给

    标记，转到您的css文件并添加：

    1
    2
    3
    4
    hr {
        border-top:0;
        color: #123455;
    }
    1
    2
    3
    <hr noshade />
    This s a test
    <hr noshade />

    使用字体颜色修改水平规则使其更灵活和易于使用。

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

    1
    2
    3
    4
    5
    /* allow hr to inherit color */
    hr { border: 1px solid;}

    /* reusable colour modifier */
    .fc_-alpha { color: crimson;}
    1
    2
    3
    4
    5
    6
    7
    normal hr:



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

    <hr class="fc_-alpha">

    你可以这样做：

    1
    2
    3
    hr {
      border: 1px solid red;
    }
    1
    2
    3
    <hr />
    This s a test
    <hr />

    作为一般规则，不能像设置其他颜色一样，用CSS设置水平线的颜色。首先，Internet Explorer需要CSS中的颜色如下所示：

    "颜色：123455"

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

    "背景色：123455"

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

    接下来，您需要给水平线一些尺寸，否则它将默认为浏览器设置的标准高度、宽度和颜色。下面是一个示例代码，说明您的CSS应该是什么样的，才能得到蓝色的水平线。

    1
    2
    3
    4
    5
    6
    7
    hr {
    border: 0;
    width: 100%;
    color: #123455;
    background-color: #123455;
    height: 5px;
    }

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

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

    希望这有帮助。

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

    1
    <font color="red"></font>
    相关讨论