HTML按钮（按钮的一部分是黑暗的）

Question

我的应用程序中有一个按钮，目前它非常基本：

<button style="height:150px;width:150px;border-radius:10px;">Hello,World</button>

这意味着它具有默认的HTML CSS效果。我试图用CSS改变它，但每当我把按钮做得更大时，在右侧和底部总是有这个黑暗的一面......我不知道为什么。如果我将其更改回默认值，则不在那里。

这是JSFiddle：

http://jsfiddle.net/htzgak6g/1/

我指的是右侧和底侧。他们看起来比其他方面更黑。我想做的就是有一些圆角的按钮和漂亮的颜色。

Answer 1

这是因为按钮带有一些基本的默认浏览器样式，这些样式仍然生效，因为您还没有覆盖它们。

在这种情况下，添加border: none将删除边框和深色。 （http://jsfiddle.net/htzgak6g/2/）

查看reset css以解决这些问题，并在浏览器中提供一致的空白平板。

Answer 2

问题是浏览器会将默认样式添加到<system>中Firebug标记的元素。您可以使用Selectors style panel查看添加的所有样式。

正如Toni所说，你需要使用reset.css忽略这样的样式。但是对于此特定问题，请将border-color设置为透明。

＆＃13;

＆＃13;

button {
  border-color: transparent;
}

＆＃13;

<button style="height:150px;width:150px;border-radius:10px;">Hello,World</button>

＆＃13;

＆＃13;

＆＃13;

Answer 3

只需像这样添加border-style:none;：

<button style="height:150px;width:150px;border-radius:10px;border-style:none;">Hello,World</button>

Here is your updated JSfiddle