我可以使用CSS border-radius属性制作椭圆吗？

Question

我试图制作一个矩形图像（爆头）

width: 200px;   
height: 280px; 

显示为椭圆。

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

任何帮助表示赞赏！

Answer 1

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

  

3.3＆＃39; border-radius＆＃39;特性

     

＆＃39; border-radius＆＃39;的两个长度值。属性定义四分之一椭圆的半径，定义角的形状（参见下图）。第一个值是水平半径（如果＆＃39;写入模式＆＃39;是垂直的，则为垂直）。如果省略第二长度，则它等于第一长度（因此角是四分之一圆）。如果长度为零，则角为方形，而不是圆角。边界半径也会导致元素的背景被舍入（即使边框是“没有”＃39;）。不允许使用负值。

     

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

＆＃13;

＆＃13;

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%;
}

＆＃13;

<div></div>

＆＃13;

＆＃13;

＆＃13;

椭圆将使用100%作为第一个或第二个值，但对另一个值使用小于100%的值：

＆＃13;

＆＃13;

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%;
}

＆＃13;

<div></div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

你真的尝试过吗？

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;