我可以使用 CSS border-radius 屬性制作橢圓嗎？

Question

我正在嘗試制作一個矩形圖像（爆頭）

width: 200px;   
height: 280px; 

顯示為橢圓。

我似乎無法阻止它試圖制作一個圓圈，或者在頂部和底部形成點，而兩側仍然是平的。

任何幫助表示贊賞！

Answer 1

根據規范，各個border-radius屬性接受第二個值，如果未指定，則默認為第一個值。

3.3 'border-radius'屬性

'border-radius' 屬性的兩個長度值定義了定義角形狀的四分之一橢圓的半徑（見下圖）。 第一個值是水平半徑（如果 'writing-mode' 是垂直的，則是垂直的）。 如果省略第二個長度，則它等於第一個（因此角是四分之一圓）。 如果任一長度為零，則角為方形，而不是圓角。 邊框半徑也會使元素的背景變圓（即使邊框為“無”）。 不允許使用負值。

您可以使用它來准確指定您希望半徑出現的位置：

 div { background: red; width: 200px; height: 280px; border-bottom-left-radius: 50% 25%; border-bottom-right-radius: 50% 25%; border-top-left-radius: 50% 25%; border-top-right-radius: 50% 25%; }

 <div></div>

橢圓將100%用於第一個或第二個值，但另一個值小於100% ：

 div { background: red; width: 200px; height: 280px; border-bottom-left-radius: 25% 100%; border-bottom-right-radius: 25% 100%; border-top-left-radius: 25% 100%; border-top-right-radius: 25% 100%; }

 <div></div>

Answer 2

你真的嘗試過嗎？？

 #test { width: 200px; height: 280px; border: 1px solid; border-radius: 50%; }

 <div id='test'></div>