我可以使用 CSS 边界半径 属性 制作椭圆吗？

Question

我正在尝试制作矩形图像（头像）

width: 200px;   
height: 280px; 

显示为椭圆。

我似乎无法阻止它试图在顶部和底部形成一个圆圈，或者在顶部和底部形成点，而两侧仍然是平坦的。

感谢任何帮助！

Answer 1

根据 the specification，各个 border-radius 属性接受第二个值，如果未指定，则默认为第一个值。

3.3 The 'border-radius' properties

The two length values of the 'border-radius' properties define the radii of a quarter ellipse that defines the shape of the corner (see the diagram below). The first value is the horizontal radius (or vertical if the 'writing-mode' is vertical). If the second length is omitted it is equal to the first (and the corner is thus a quarter circle). If either length is zero, the corner is square, not rounded. The border radius also causes the element's background to be rounded (even if the border is 'none'). Negative values are not allowed.

您可以使用它来准确指定您希望半径发生的位置：

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>