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

Question

我想制作一个矩形图像(爆头)

width: 200px;   
height: 280px; 

显示为椭圆.

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

任何帮助赞赏!

Answer 1

根据规范,各个border-radius属性接受第二个值,如果未指定,则默认为第一个值.

3.3"border-radius"属性

'border-radius'属性的两个长度值定义了四分之一椭圆的半径,该椭圆定义了角的形状(参见下图).第一个值是水平半径(如果'写入模式'是垂直的,则为垂直).如果省略第二长度,则它等于第一长度(因此角是四分之一圆).如果长度为零,则角为方形,而不是圆角.边界半径也会导致元素的背景被舍入(即使边框为'none').不允许使用负值.

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

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>