阅读CSS Secrets（八）

灵活的椭圆

我们都知道，在一个正方形的时候，定义一个border-radius的值大于等于一半的宽度后就可以生成一个圆，这里的border-raidus改为150px还是一个圆

div{
  width:200px;
  height:200px;
  background:yellowgreen;
  border-radius:100px;//>=100px
}

1.png

如何去制作一个椭圆呢，border-raidus 可以用/来形成椭圆

div{
  width:200px;
  height:150px;
  background:yellowgreen;
  border-radius:100px/75px;
}

2.png

个人观点：border-radius行程弧度的实质是，生成一个圆或者椭圆放置在四个角

3.png

之前可以使用border-radius:50% 这里同样可以使用50%/50%来生成椭圆，当然可以直接用一个50%来代替50%/50%

border-radius只是个简写，可以细分多个属性
border-top-left-radius
border-top-right-radius
border-bottom-left-radius
border-bottom-right-radius
下面是对应关系

4.png

如果更加细分开可以分为 水平半径和垂直半径

div{
  width:200px;
  height:150px;
  background:yellowgreen;
  border-radius:50%/100% 100% 0 0 ;
}

5.png