Невозможно заставить работать границы радиуса в моем приложении ASP.NET ZERO MVC с использованием Chrome - PullRequest
Новая
       9

Невозможно заставить работать границы радиуса в моем приложении ASP.NET ZERO MVC с использованием Chrome

0 голосов
/ 21 октября 2018

У меня все остальные части 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 недавно отлично работал при использовании в приложении веб-форм.Я не вижу никакой очевидной причины, почему это не работает.Я также использую VS 2017, если это что-то меняет.Надеюсь, это просто усталый мозг :) Спасибо за помощь!

1 Ответ

0 голосов
/ 21 октября 2018

Представленный фрагмент кода работает нормально.Пожалуйста, смотрите ниже ниже.Поскольку вы, похоже, используете bootstrap, возможно, что какой-то другой 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>
...