更改hr元素的颜色-Java 学习之路

658

我想使用CSS更改 hr 标签的颜色 . 代码I 've tried below doesn' t似乎有效：

hr {
  color: #123455;
}

25 回答

7
在ff，opera，即chrome和safari中测试过
```
hr{
  border-top: 1px solid red;
}
```
看小提琴http://jsfiddle.net/HPSjU/
回复于 2024-04-25T06:39:33+08:00
985
我认为这可能很有用 . 这是简单的CSS选择器 .
```
hr { background-color: red; height: 1px; border: 0; }
```
回复于 2024-04-25T06:39:33+08:00
8
```
hr
{
  background-color: #123455;
}
```
背景是你应该尝试改变的背景

您还可以使用边框颜色 . 我不确定我是否认为存在交叉浏览器问题 . 你应该在不同的浏览器中测试它
回复于 2024-04-25T06:39:33+08:00
2
```
hr {
  height:0; 
  border:0; 
  border-top:1px solid #083972; 
}
```
这将保持水平规则1px厚，同时也改变它的颜色
回复于 2024-04-25T06:39:33+08:00
4
我正在测试IE，Firefox和Chrome 2015年5月，这对当前版本最有效 . 它以人力资源为中心，使其达到70％的宽度：
```
hr.light { 
 width:70%; 
 margin:0 auto; 
 border:0px none white; 
 border-top:1px solid lightgrey; 
}
```
```
<hr class="light" />
```
回复于 2024-04-25T06:39:33+08:00
4
您可以提供 <hr noshade> 标记并转到您的css文件并添加：
```
hr {
 border-top:0;
 color: #123455;
}
```
```
<hr noshade />
This s a test
<hr noshade />
```
回复于 2024-04-25T06:39:33+08:00
0
只有颜色的边框顶部足以使线条颜色不同 .
```
hr{
  border-top: 1px solid #ccc;
}
```
回复于 2024-04-25T06:39:33+08:00
0
作为一般规则，您不能像使用其他任何东西一样使用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" />
```
希望这可以帮助 .
回复于 2024-04-25T06:39:33+08:00
0
有些浏览器使用 color 属性，有些使用 background-color 属性 . 为了安全起见：
```
hr{
    color: #color;
    background-color: #color;
}
```
回复于 2024-04-25T06:39:33+08:00
9
在阅读了这里的所有答案，并看到所描述的复杂性之后，我开始尝试人力资源进行小规模的转移 . 而且，结论是你可以抛弃你编写的大部分monkeypatched CSS，阅读这个小的primer并使用这两行纯CSS：
```
hr {
  border-style: solid;
  border-color: cornflowerblue; /* or whatever */
}
```
那就是 ALL 你需要为你的HR设计风格 .
- 兼容跨浏览器，跨设备，跨操作系统，跨英语 Channels ，跨年代 .
- 否"I think this will work..."，"you need to keep Safari/IE in mind..."等
- 没有额外的css - 没有 height ， width ， background-color ， color 等涉及 .
只是防弹多彩的HR . 就是那个简单的TM .

额外奖励：要给HR一些高度 H ，只需将 border-width 设置为 H/2 .
回复于 2024-04-25T06:39:33+08:00

你可以这样做：

hr {
  border: 1px solid red;
}

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

回复于 2024-04-25T06:39:33+08:00

36
如果你使用css类，那么它将被所有'hr'标签占用，但如果你想要一个特定的'hr'使用下面的代码，即内联css
```
<hr style="color:#99CC99" />
```
如果它不在chrome中工作，请尝试以下代码：
```
<hr color="red" />
```
回复于 2024-04-25T06:39:33+08:00
65
好吧，我是HTML，CSS和Java的新手，但我尝试了在所有浏览器中适用于我的方式 . 我使用JS而不是CSS，这对某些浏览器不起作用 .

首先，我给了HR元素 id="myHR" 并在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";
```
回复于 2024-04-25T06:39:33+08:00
99
我相信这是最有效的方法：
```
<hr style="border-top: 1px solid #ccc; background: transparent;">
```
或者如果您喜欢在所有hr元素上执行此操作，请在CSS上写下：
```
hr {
 background-color: transparent;
 border-top: 1px solid #ccc;
}
```
回复于 2024-04-25T06:39:33+08:00

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

回复于 2024-04-25T06:39:33+08:00

0

border-color 适用于 Chrome 和 Safari
background-color 适用于Firefox和Opera
color 在 IE7+ 中有效

回复于 2024-04-25T06:39:33+08:00
-2
由于我没有评论的声誉，我将在这里给出一些想法 .

如果你想要一个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; .

在最糟糕的情况下，您可以尝试使用  标记并将其珍贵的 <hr/> 标记放入其中 . 它将继承  标记颜色 .

使用这种方法，你想_119905_想这样做： <hr width="50" align="left"/> .

例：
```

 awhieugfrafgtgtfhjjygfjyjg
 <hr width="50" align="left"/>
 
 
```
这是一个供您查看的链接：http://jsfiddle.net/sna2D/
回复于 2024-04-25T06:39:33+08:00

您可以使用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);

该代码将显示垂直灰线 .

回复于 2024-04-25T06:39:33+08:00

4
你也可以使用字体标签
```
<hr>
```
回复于 2024-04-25T06:39:33+08:00
6
这很简单，也是我最喜欢的 .
```
<hr style="background-color: #dd3333" />
```
回复于 2024-04-25T06:39:33+08:00
3
- 代码适用于较旧的IE
- 试过很多颜色
```
<hr color="black">
<hr color="blue">
```
回复于 2024-04-25T06:39:33+08:00

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

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

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

回复于 2024-04-25T06:39:33+08:00

4
我认为您应该使用 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发布的 An article Headers 为“12 Little-Known CSS Facts”，提到如果指定 hr { border-color: inherit } ， <hr> 可以将 border-color 设置为其父级的 color .
回复于 2024-04-25T06:39:33+08:00
8
```
hr {
height: 1px;
color: #123455;
background-color: #123455;
border: none;
}
```
这样做可以让你根据需要改变高度 . 祝好运 . 资料来源：How To Style HR with CSS
回复于 2024-04-25T06:39:33+08:00

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

color 属性不是't inherited by default, so the following needs to be added to 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">

回复于 2024-04-25T06:39:33+08:00

更改hr元素的颜色

25 回答

相关问题