<>：自适应的椭圆

自适应的椭圆

利用border-radius生成椭圆。CSS参考手册

椭圆

对一个宽度和高度不一样的容器进行以下设置，就获得一个椭圆
border-radius: 50%

半椭圆

border-radius是一个简写属性。分别对应着：

• border-top-left-radius

• border-top-right-radius

• border-bottom-right-radius

• border-bottom-left-radius
  而实用斜线能够单独指定水平半径和垂直半径。综合利用这些，就能够获得半椭圆

border-radius: 50% / 100% 100% 0 0; //纵轴对称

border-radius: 100% 0 0 100% / 50%; //横轴对称

四分之一椭圆

继续沿着半椭圆的思路。咱们来生成一个四分之一椭圆
border-radius: 100% 0 0 0; //左上角，也能够指定其余角