1
我正在做一個「Simon Clone」，我有一個Div（現在是一個正方形），我正在努力使它成爲循環。現在我正在包裹4個彩色按鈕（正確的長度），所以他們正確地坐在裏面。裏面有按鈕的CSS Round Div？
.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不會成爲一個圓圈。