九、自适应的椭圆

提出问题

  • 如果它的宽高相等，就显示为一个圆；如果宽高不等，就显示为一个椭圆。

解决问题

  • border-radius：它可以单独指定水平和垂直半径，只要用一个斜杠（/）分隔这两个值即可。
  • 同时，它不仅可以接受长度值，还可以接受百分比值。这个
    百分比值会基于元素的尺寸进行解析，即宽度用于水平半径的解析，而高度用于垂直半径的解析。
1
2
3
div{
    border-radius: 50%;
}

半椭圆

  • border-radius是一个简写属性。我们可以为元素的每个角
    指定不同的值，而且还有两种方法可以做到这一点。第一种方法就是使用它所对应的各个展开式属性：

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

  • 一次性提供用空格分开的多个值。

    • 如果我们传给它四个值，这四个值就会被分别从左上角开始以顺时针顺序应用到元素的各个拐角。
    • 如果我们提供的值少于四个，则它们会以 CSS 的常规方式重复，类似于 border-width 的值。
    • 如果只提供了三个值，则意味着第四个值与第二值相同；如果只有两个值，则意味着第三个值与第一个相同。
    • 我们甚至可以为所有四个角提供完全不同的水平和垂直半径，方法是在斜杠前指定 14 个值，在斜杠后指定另外 14 个值。

  • 沿横轴劈开的上半椭圆：

1
2
3
div{
   border-radius: 50% / 100% 100% 0 0; 
}
  • 沿横轴劈开的下半椭圆：
1
2
3
div{
   border-radius: 50% / 0 0 100% 100% ; 
}
  • 沿横轴劈开的左半椭圆：
1
2
3
div{
   border-radius: 100% 0 0 100% / 50%; 
}
  • 沿横轴劈开的右半椭圆：
1
2
3
div{
   border-radius:  0 100% 100% 0/ 50%; 
}

四分之一椭圆

  • 其中一个角的水平和垂直半径值都需要是100%，而其他三个角都不能设为圆角。
1
2
3
div{
   border-radius: 100% 0 0 0;
}