如何设计一个 hr 标签答案

【问题标题】：How to style up a hr tag如何设计一个 hr 标签
【发布时间】：2016-02-25 14:15:11
【问题描述】：

我想设计一个<hr /> 标签，但似乎无法在任何有效的地方在线找到答案。

如果可能的话，我想改变颜色和厚度？我可以很容易地改变它的长度，但到目前为止似乎就是这样。

或者我可以使用 hr 标签的替代品吗？

谁能帮帮我？

【问题讨论】：

Changing the color of a hr element的可能重复

标签： html css styling

【解决方案1】：

你可以这样做：

CSS

hr{
   border: none;
   height: 10px;
   background: #ccc;
}

DEMO HERE

【讨论】：

太棒了！谢谢你:)

【解决方案2】：

你可以通过属性改变颜色。

<hr color="red" size="10px">

在这里测试： https://jsfiddle.net/8wevdosq/

【讨论】：

有效，但这些属性在 HTML5 中已弃用
是的。因为其他答案是用css。我提供了html方式。

【解决方案3】：

hr 是一个边框，因此您只需在 CSS 中设置边框样式：

hr {
    border-color: blue;
    border-width: 10px;
}

DEMO

【讨论】：

【解决方案4】：

如果你设置了类的样式，那么你需要写“。”在那里，如果你设置了 id 的样式，那么你必须在那边输入“#”，但如果你设置标签的样式，那么只需写标签名称喜欢...

hr{
     height:2px;
     background:yellow;
     border:0;
 }

运行片段代码以获取更多信息...

<html>
  <head>
    <title>Designing HR - Horizontal Row </title>
    <style>
      hr{
        height:2px;
        background:yellow;
        border:0;
      }
    </style>
  </head>
  <body>
    <hr/>
  </body>
</html>

【讨论】：