html - 边框 css 在谷歌浏览器中不起作用？

Question

我从教程中获得了以下 css 代码，以在 firefox 中设置 hr 标签的样式。

hr {
  -moz-border-bottom-colors: none;
  -moz-border-image: none;
  -moz-border-left-colors: none;
  -moz-border-right-colors: none;
  -moz-border-top-colors: none;
  border-color: #EEEEEE -moz-use-text-color #FFFFFF;
  border-style: solid none;
  border-color: #EEEEEE;
  border-width: 2px 0;
  margin: 10px 0;
}

Result in picture

我尝试为 Chrome 浏览器做类似的事情，并在 hr{} 中添加了以下代码:

-webkit-border-bottom-colors: none;
  -webkit-border-image: none;
  -webkit-border-left-colors: none;
  -webkit-border-right-colors: none;
  border-color:none;
  border-color: #EEEEEE -webkit-use-text-color #FFFFFF;

但它在 Chrome 中不起作用。

Result in picture

请帮我在 Chrome 中完成。

Answer 1

您绕过一些奇怪的方法来创建边框。

如果你只想要边框，做这样的事情:

hr{
    border-style:solid;
    border-color:#eee;
    border-width:2px;
}

然后添加您想要的其他样式，例如 margin 10px;。我认为为边框添加浏览器特定代码毫无意义。

如果你想要特定的边框特定的颜色，你可以使用这个:

border-top:1px solid #f00;
border-left:5px solid #00f;
border-right:2px solid #0f0;
border-bottom:10px solid #f0f;