修复统一按钮边框半径

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 样式或创建您自己的自定义 class 并对其应用 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 class

<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 class 实现的顺序来覆盖这些 classes。然后根据需要覆盖 classes。

.btn-group>.btn:first-child:not(:last-child):not(.dropdown-toggle) { 边界右上角半径：0； border-bottom-right-radius: 0; }

修复统一按钮边框半径

Fix for uniform button border-radius

html

css

twitter-bootstrap

CODEPEN

CODEPEN