Question

我正在制作一个“西蒙克隆”，我有一个Div（现在是一个正方形），我试图让它成为圆形。现在我将4个彩色按钮包裹在里面（长度正确），这样它们就能正确地放在里面。

.simon-container {
  border: 2px solid purple;
}

.panel {
  opacity: .35;
  width: 300px;
  height: 300px;
  float: left;
  font-size: 22px;
  color: black;
}

.simon {
  margin: 0 auto;
  border: 1px solid black;
  border-radius 10px;
  display: flex;
  flex-wrap: wrap;
  width: 600px;
  height: 600px;
}

#green {
  background-color: green;
}

#red {
  background-color: red;
}

#yellow {
  background-color: yellow;
}

#blue {
  background-color: blue;
}

<div class="simon-container">
  <div class="simon">
    <button id="green" class="panel 1" type="button" disabled>1</button>
    <button id="red" class="panel 2" type="button" disabled>2</button>
    <button id="blue" class="panel 3" type="button" disabled>3</button>
    <button id="yellow" class="panel 4" type="button" disabled>4</button>
  </div>
</div>

基本上我希望按钮所在的DIV是一个圆圈。我认为border-radius: 50%;会起作用，但事实并非如此，我认为这是因为按钮。

有没有办法可以让div成为一个圆圈但是任何在div之外流动的东西基本上都是“切断”所以它不会溢出边界？这可能吗？我假设设置overflow: hidden会这样做吗？

虽然我仍然不确定为什么div不会成为一个圆圈。

Answer 1

将border-radius设置为50％并添加overflow：hidden：

.simon-container {
  border: 2px solid purple;
}

.panel {
  opacity: .35;
  width: 300px;
  height: 300px;
  float: left;
  font-size: 22px;
  color: black;
}

.simon {
  margin: 0 auto;
  border: 1px solid black;
  display: flex;
  flex-wrap: wrap;
  width: 600px;
  height: 600px;
  border-radius: 50%;
  overflow: hidden;
}

#green {
  background-color: green;
}

#red {
  background-color: red;
}

#yellow {
  background-color: yellow;
}

#blue {
  background-color: blue;
}

<div class="simon-container">
  <div class="simon">
    <button id="green" class="panel 1" type="button" disabled>1</button>
    <button id="red" class="panel 2" type="button" disabled>2</button>
    <button id="blue" class="panel 3" type="button" disabled>3</button>
    <button id="yellow" class="panel 4" type="button" disabled>4</button>
  </div>
</div>

Answer 2

如果你必须https://www.w3schools.com/w3css/w3css_buttons.asp，你会发现如何制作圆形按钮

Answer 3

你试试这个吗？

::1 - - [08/May/2017:12:49:35 -0700] "OPTIONS /create HTTP/1.1" 200 - 0.0030
::1 - - [08/May/2017:12:49:35 -0700] "POST /create HTTP/1.1" 403 30 0.0076

带有按钮的CSS Round Div？

3 个答案: