当你把一个正方形元素的border-raidus设置的足够大的时候，你就得到了一个圆形，你也可能会发现，只要指定border-radius的值大于正方形边长的一半以后，你就得到了一个圆形。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    .box{
      background: #fb3;
      width: 200px;
      height: 200px;
      border-radius: 150px;
    }
  </style>
</head>
<body>
  <div class="box"></div>
</body>
</html>

不过，我们往往不是很想去固定一个元素的高度与宽度，而是希望它能根据内容自动去调整与适应，也就是说：如果它的宽高相等，那么就显示一个圆，如果不想等就显示一个椭圆。

方案

其实border-radius是可以单独指定水平半径和垂直半径的，只要用一个“ / ” 分开即可。

并且它不仅可以接受长度值，也可以接受百分比值。这个百分比值会基于元素的尺寸进行解析。

  <style>
    .box{
      background: #fb3;
      width: 200px;
      height: 300px;
      border-radius: 50%
    }
  </style>

既然已经可以生成一个自适应的椭圆，那么能不能生成椭圆的一部分？

其实border-radius是一个简写属性，其扩展属性是：

border-top-left-radius
border-top-right-radius
border-bottom-right-radius
border-bottom-left-radius

但我们还是偏向于用border-radius这个简写属性，我们可以一次性提供并且用空格分开。

如果我们传给它4个值，这个四个值就被分别从左上角开始以顺时针顺序应用到元素的各个拐角。

如果是3个值，则第四个值与第二个值相同。

如果是2个值，则一和三相同，二和四相同。

如果1个值，则四个值都相同。

我们也可以为所有4个角提供完全不同的水平和垂直半径，方法是“/”前指定水平的1～4个值，“/”后指定垂直的1～4个值，顺序和规律与之前论述的相同。

因此，我们可以得到一个半椭圆：

  <style>
    .box{
      background: #fb3;
      width: 200px;
      height: 200px;
      border-radius: 50% / 100% 100% 0 0;
    }
  </style>

半椭圆分析如下：

这个形状是垂直对称的，也就说左上角和右上角的半径应该是相同的，与此类似，左下角和右下角的半径值也应该相同。
顶部边缘并没有垂直的部分，也就是说，这个顶边都是曲线，也就是说，左上角和右上角的半径之和应该等于整个形状的宽度。
另外垂直方向，顶部的两个圆角占据了整个元素的宽度，而且底部完全没有任何圆角。

四分之一圆：

  <style>
    .box{
      background: #fb3;
      width: 200px;
      height: 200px;
      border-radius: 100% 0 0 0;
    }
  </style>

杰人编程网

每天一个CSS小技巧 - 自适应的椭圆

方案