在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; 
}