自适应的椭圆

border-radius

• 传 四个值时，分别对应从左上角以顺时针顺序的各个拐角

  

  

  

  

• 可以以 / 分隔，前 1~4 个值指水平半径，后 1~4 个值指垂直半径

自适应椭圆

只要 4 个角的水平半径和垂直半径都是 50% 即可

.box {
    border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%;
    /** 简写成下面 **/
    border-radius: 50% / 50%;
    /** 还可以简写成下面 **/
    border-radius: 50%
}

半椭圆

• 左上角和右上角的水平半径之和应该等于半椭圆的宽度，即左右上角的水平半径各为半椭圆宽度的一半

• 顶部两个圆角占据了整个元素的高度，底部没有任何圆角，所以垂直半径应该是 100% 100% 0 0

• 综合，这种形状的半椭圆应该是

  .box {
      border-radius: 50% / 100% 100% 0 0;
  }

• 举一反三，这种形状的应该是

  

  .box {
      border-radius: 100% 0 0 100% / 50%;
  }

四分之一椭圆

• 其中一个角的水平和垂直半径值都需要是 100%，而其他三个角都不能设为圆角

  .box {
      border-radius: 100% 0 0 0;
  }