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

Question

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

width: 200px;   
height: 280px; 

显示为椭圆。

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

任何帮助表示赞赏！

Answer 1

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

3.3 'border-radius' 属性

“border-radius”属性的两个长度值定义了定义角形状的四分之一椭圆的半径（见下图）。第一个值是水平半径（如果“写作模式”是垂直的，则为垂直半径）。如果省略第二个长度，则它等于第一个长度（因此角是四分之一圆）。如果任一长度为零，则角是方形的，而不是圆形的。边框半径还会使元素的背景变圆（即使边框为“无”）。不允许使用负值。

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

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>