如何在单选按钮中制作边框半径？ [复制]答案

【问题标题】：How do I make border-radius in radio buttons? [duplicate]如何在单选按钮中制作边框半径？ [复制]
【发布时间】：2021-01-16 03:29:29
【问题描述】：

如何在单选按钮中添加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，但由于某种原因它不起作用。

【问题讨论】：

演示 - jsfiddle.net/xs17zk3c/16
你需要把radius放到item类中
这能回答你的问题吗？ Should border-radius clip the content?

标签： html css

【解决方案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>

【讨论】：