在Chrome中，添加边框半径也会添加背景颜色。为什么？

Question

我试图将border-radius添加到输入提交按钮，但是当我这样做时，Chrome也添加了灰色背景颜色和方框阴影。

如何才能使用边框半径来圆角，并保持背景颜色为白色，并且没有箱形阴影？

这里是我的HTML：

<input type="submit" id="nm-match" class="nm-button" value="Match" /> 

我的CSS：

.nm-button { 
    border-radius: 5px; 
} 

这里的问题的演示：http://jsfiddle.net/CJg43/3/

Answer 1

在Chrome的督察，并滚动到元素.M - 按钮。 （最快的方法是直接在按钮上右键单击，然后说检查元素）如果你看看元素标签（它应该是第一个弹出来的，并在样式部分的右侧看它将显示所有的CSS样式是应用于该元素，无论它们是由您还是由Chrome放置（关于此样式部分的很酷的事情是样式按照优先顺序排列，因此您可以轻松地确定哪些样式会覆盖哪些样式（即较高样式会覆盖较低样式） ）或者即使它们是元素的默认值（例如display: block;总是在块级元素上，例如div。）这是一个方便的工具。

所以，如果你在你的情况下这样做，你会看到chrome应用不同的样式以输入样式。这些主要是因为输入[type =“submit”]而被应用，如果你想覆盖这些样式，只需在你的按钮上覆盖类中的相同样式即可。加入下面的应该是罚款，如果你只希望覆盖样式背景色“的box-shadow”（它实际上是被创建的影子所以只需添加一个新的边界的边界）

.nm-button { 
    border-radius: 5px; 
    background-color: #fff; 
    border: 1px solid #ccc; 
} 

而且因为它是一个按钮，提示下面的代码，所以它看起来是可点击的。

.nm-button:hover { 
    background-color: #ddd; 
    cursor: pointer; 
} 

这里是你的情况下铬由那里的样式。它很多，但铬的方法也很简约，所有这些都很容易被覆盖。 （P.S.我希望这有帮助，如果您有任何问题，请随时发表评论。）

input[type="button"], input[type="submit"], input[type="reset"], input[type="file"]::-webkit-file-upload-button, button { 
    padding: 1px 6px; 
} 
user agent stylesheetinput[type="button"], input[type="submit"], input[type="reset"], input[type="file"]::-webkit-file-upload-button, button { 
    align-items: flex-start; 
    text-align: center; 
    cursor: default; 
    color: buttontext; 
    padding: 2px 6px 3px; 
    border: 2px outset buttonface; 
    border-image-source: initial; 
    border-image-slice: initial; 
    border-image-width: initial; 
    border-image-outset: initial; 
    border-image-repeat: initial; 
    background-color: buttonface; 
    box-sizing: border-box; 
} 
user agent stylesheetinput[type="button"], input[type="submit"], input[type="reset"] { 
-webkit-appearance: push-button; 
    white-space: pre; 
} 
user agent stylesheetinput, input[type="password"], input[type="search"], isindex { 
    -webkit-appearance: textfield; 
    padding: 1px; 
    background-color: white; 
    border: 2px inset; 
    border-image-source: initial; 
    border-image-slice: initial; 
    border-image-width: initial; 
    border-image-outset: initial; 
    border-image-repeat: initial; 
    -webkit-rtl-ordering: logical; 
    -webkit-user-select: text; 
    cursor: auto; 
} 
user agent stylesheetinput, textarea, keygen, select, button, isindex { 
    margin: 0em; 
    font: -webkit-small-control; 
    color: initial; 
    letter-spacing: normal; 
    word-spacing: normal; 
    text-transform: none; 
    text-indent: 0px; 
    text-shadow: none; 
    display: inline-block; 
    text-align: start; 
} 
user agent stylesheetinput, textarea, keygen, select, button, isindex, meter, progress { 
    -webkit-writing-mode: horizontal-tb; 
}