时间戳

首页 > 解决方案 > 无法使用 Chrome 在我的 ASP.NET ZERO MVC 应用程序中使用边框半径

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

问题描述

我的 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与其他东西一起使用，结果相同但无法正常工作。我已经在许多网站和应用程序中成功使用了边界半径。这个 CSS 最近在 Web 表单应用程序中使用时效果很好。我看不出它不起作用的任何明显原因。如果这有什么不同，我也在使用 VS 2017。希望这只是一个疲惫的大脑:) 感谢您的帮助！

标签： htmlcssasp.netasp.net-mvcaspnetboilerplate

解决方案

提供的代码片段似乎工作得很好。请参见下文。正如您似乎正在使用引导程序，可能是其他一些 css 正在覆盖您的样式属性。尝试!important在您的属性上设置声明border-radius，如下所示：

.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>

推荐阅读