<<CSS揭秘>>：自适应的椭圆

自适应的椭圆

利用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; //左上角，也可以指定其他角