Question

如何在单选按钮中设置border-radius？如何将border-radius应用于box类？

.box {
  width: 300px;
  height: 60px;
  background: red;
  display: flex;
  align-items: center;
  border-radius: 50px;
}

.item {
  width: 100%;
  height: 100%;
  background: #000;
  display: flex;
  color: red;
  justify-content: center;
  align-items: center;
}

.item_active {
  background: gray;
}

<div class="box">
  <div class="item_active item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

我将其设置为50px，但是由于某种原因它不起作用。

Answer 1

您需要在.box类中添加隐藏的溢出内容，以使边框半径可以削减底层内容。

.box {
  width: 300px;
  height: 60px;
  background: red;
  display: flex;
  align-items: center;
  border-radius: 50px;
  overflow: hidden;
}
.item {
  width: 100%;
  height: 100%;
  background: #000;
  display: flex;
  color: red;
  justify-content: center;
  align-items: center;
}
.item_active {
  background: gray;
}

<div class="box">
  <div class="item_active item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

如何在单选按钮中设置边框半径？

1 个答案: