使用Chrome無法在我的ASP.NET ZERO MVC應用程序中使用邊界半徑

Question

我的CSS的所有其他部分工作正常，但沒有邊框半徑。 這是一個CSS代碼段：

.topGreenButton {
border: 2px solid #2DCC70;
border-radius: 20px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
background-color: #2DCC70;
color: white;
padding: 10px 30px 10px 30px;
margin-right: 20px;

}

我這樣稱呼它：

<div class="col-lg-5 col-md-5 col-sm-6 col-xs-6">

            <table class="topButtonTable">
                <tr>
                    <td>
                        <input type="button" value="Schedule Party" class="topGreenButton" />
                    </td>
                    <td>
                        <input type="button" value="Open Virtual Party" class="topGreenButton" >
                    </td>
                </tr>
            </table>
        </div>

就像我提到的那樣，所有其他CSS在整個View中都可以正常工作。 即使在這些調用中，顏色，填充，字體顏色和邊距也可以正常工作。 我試過將邊框半徑與這些按鈕以外的其他東西一起使用，導致無法正常工作。 我已經在許多網站和應用程序中成功使用border-radius。 該CSS最近在Web表單應用程序中使用時效果很好。 我看不到任何不起作用的明顯原因。 如果這有任何區別，我也使用VS 2017。 希望這只是一個疲憊的大腦:)謝謝您的幫助！

Answer 1

提供的代碼段似乎工作正常。 請在下面進一步查看。 當您似乎正在使用引導程序時，可能是某些其他CSS覆蓋了您的style屬性。 嘗試在您的border-radius屬性上設置!important聲明，如下所示：

.topGreenButton {
  border: 2px solid #2DCC70;
  border-radius: 20px !important;
  -moz-border-radius: 20px !important;
  -webkit-border-radius: 20px !important;
  background-color: #2DCC70;
  color: white;
  padding: 10px 30px 10px 30px;
  margin-right: 20px;
}

這是完整的工作片段：

 .topGreenButton { border: 2px solid #2DCC70; border-radius: 20px !important; -moz-border-radius: 20px !important; -webkit-border-radius: 20px !important; background-color: #2DCC70; color: white; padding: 10px 30px 10px 30px; margin-right: 20px; } 

 <div class="col-lg-5 col-md-5 col-sm-6 col-xs-6"> <table class="topButtonTable"> <tr> <td> <input type="button" value="Schedule Party" class="topGreenButton" /> </td> <td> <input type="button" value="Open Virtual Party" class="topGreenButton"> </td> </tr> </table> </div>