Question

http://codepen.io/mochiii/full/NGMXpe/我有这个项目我的问题是按钮的边界半径不均匀如何解决这个问题。我已经尝试为各个按钮指定顺序半径但不起作用。

@import url(https://fonts.googleapis.com/css?family=Audiowide);
@import url(https://fonts.googleapis.com/css?family=Righteous);

body{
  background-color: #000000;
  color: #ffffff;
}

.header{
  font-family: 'Righteous', cursive;  
}

h1{
  border: 3px solid #ffffff;
  border-radius: 20px;
  width: 50%;
  padding: 10px;
}
.countdown-block{
  margin-top: 30px;
  margin-bottom: 40px;
}

#clock{
  border: 50px solid #FF1919;
  border-radius: 60px;
  padding: 20px;
  width: 370px;
  margin: 0px auto;
}
#clock>#countdown{
  font-size: 60px;
  font-family: 'Audiowide', cursive;
}

.breakHeader, .timeHeader{
  font-family: 'Righteous', cursive;
}

#break, #time{
  font-size: 40px;
  font-family: 'Audiowide', cursive;
}

.btn{
  font-size: 25px;
  font-family: 'Righteous', cursive;
  transition: all .3s;
  position: absolute;

}

.btn:hover{
  font-size: 35px;
}

.btn-group{
  position: relative;
  height: 35px;
  display: block;
}

.btn-group > .btn{
  float: none;
}

footer{
  margin-top: 80px;
  border-top: 2px dashed #ffffff;
}

我不知道该怎么办谢谢！

Answer 1

问题是你使用Bootstrap，如果你使用.btn-group Bootstrap有预定义的样式（你可以看到它HERE）。

您可以覆盖Bootstrap样式或创建自己的自定义类并将border-radius应用于它。

第一个解决方案：

CSS：

.btn-group>.btn:first-child:not(:last-child):not(.dropdown-toggle) {
  border-radius: 10px;
}
.btn-group>.btn:not(:first-child):not(:last-child):not(.dropdown-toggle) {
  border-radius: 10px;
}
.btn-group>.btn:last-child:not(:first-child), .btn-group>.dropdown-toggle:not(:first-child) {
  border-radius: 10px;
}

CODEPEN

第二个解决方案：

HTML：

将your-border-radius课程添加到每个按钮

<button class="btn btn-success your-border-radius" id="countdownStart">Start</button>

CSS：

.your-border-radius {
  border-radius: 10px !important;
}

您必须使用!important规则来覆盖Bootstrap样式。

CODEPEN

Answer 2

问题在于您实现bootstrap.min。有一个删除边框半径的按钮组。你可以做的是通过改变css类实现的顺序来覆盖这些类。然后在你想要的任何东西上写下课程。

.btn-group＆gt; .btn：first-child：not（：last-child）：not（。dropdown-toggle）{ border-top-right-radius：0; border-bottom-right-radius：0; }

修复统一按钮边框半径

2 个答案:

CODEPEN

CODEPEN