html - 无法使用 Chrome 在我的 ASP.NET ZERO MVC 应用程序中使用 border-radius

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 与其他东西一起使用，结果相同，但无法正常工作。我已经在许多网站和应用程序中成功使用了 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>