边框css在谷歌浏览器中不起作用？答案

【问题标题】：border css don't work in google chrome?边框css在谷歌浏览器中不起作用？
【发布时间】：2014-01-22 01:10:10
【问题描述】：

我从教程中获得了以下 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 中完成。

【问题讨论】：

jsfiddle.net/z2y5B
@Ruddy 它对我不起作用。我现在在我的问题中添加屏幕截图的图片。

标签： html css google-chrome border

【解决方案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;

【讨论】：

不管他们制作的方式多么奇怪，它仍然有效。
是的，我不质疑它有效的事实，（对我也有效），但是当它应该更简单时，它是一种令人困惑的方式。 @Ruddy
@Ruddy @BeatAlex 你有像这样dropbox.com/s/gwt703a0cqg443b/firefox.png 的chrome 的hr吗？但是我在 chrome 中得到了 hr，就像这样 dropbox.com/s/vtvsxk1pmpnujvy/chrome.png.
得到它'border-top:1px solid #EEEEEE;边框底部：10px 实心#FFFFFF；边框样式：实心无；边框宽度：2px 0；边距：10px 0;'

【解决方案2】：

只需使用快捷方式

试试这个

border:4px #000 实心；

浏览器的新版本不需要添加 -webkit 和其余部分

【讨论】：

你所拥有的并不等同于OP所拥有的。