无法使用 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 在整个视图中都正常工作。即使在这些调用中，颜色、填充、字体颜色和边距也能正常工作。除了这些按钮之外，我还尝试将 border-radius 与其他东西一起使用，结果相同，但无法正常工作。我已经在许多网站和应用程序中成功使用了 border-radius。 CSS 最近在 Web 表单应用程序中使用时效果很好。我看不出它不起作用的任何明显原因。如果有什么不同的话，我也在使用 VS 2017。希望只是脑子累了 :) 感谢您的帮助！

Answer 1

提供的代码片段似乎工作正常。请参阅下文。由于您似乎在使用 bootstrap，可能其他 css 覆盖了您的风格属性。尝试在 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>

无法使用 Chrome 在我的 ASP.NET ZERO MVC 应用程序中使用边界半径

Unable to get border-radius working in my ASP.NET ZERO MVC app using Chrome

html

css

asp.net

asp.net-mvc

aspnetboilerplate