元素形状之“自适应的椭圆”

设计场景

• 有时候我们不给元素指定固定的宽高，是希望它能 根据内容自动调整并适应
• 如果宽高相等，就显示为一个圆；如果宽高不等，就显示为一个椭圆

解决方案

结构

<div class="box">
    <!-- 自适应的椭圆内容 -->
</div>

风格

.box {
  width: 200px;
  height: 200px;
  border-radius: 50%;
}

说明：这个百分比值是基于 元素的尺寸进行解析 的

写到这里小编提问：如何实现半椭圆呢？

• 沿横轴劈开的上半椭圆
  结构

<div class="box">
    <!-- 半椭圆内容 -->
</div>

风格

.box {
    width: 256px;
    height: 160px;
    background-color: #fb3;
    border-radius: 50% / 100% 100% 0 0;
}

• 沿横轴劈开的下半椭圆
  结构

<div class="box">
    <!-- 半椭圆内容 -->
</div>

风格

.box {
    width: 256px;
    height: 160px;
    background-color: #fb3;
    border-radius: 50% / 0 0 100% 100%;
}

• 沿纵轴劈开的左半椭圆
  结构

<div class="box">
    <!-- 半椭圆内容 -->
</div>

风格

.box {
    width: 256px;
    height: 160px;
    background-color: #fb3;
    border-radius:  100% 0 0 100% / 50%;
}

• 沿纵轴劈开的右半椭圆
  结构

<div class="box">
    <!-- 半椭圆内容 -->
</div>

风格

.box {
    width: 256px;
    height: 160px;
    background-color: #fb3;
    border-radius:  0 100% 100% 0 / 50%;
}

说明：border-radius 属性可以 单独指定水平和垂直半径，只要用一个斜杠（/）分隔这两个值即可

写到这里小编再次提问：如何实现四分之一椭圆呢？

结构

<div class="box">
    <!-- 半椭圆内容 -->
</div>

风格

.box {
  width: 256px;
  height: 160px;
  background-color: #fb3;
  border-radius:  100% 0 0 0;
}

说明：创建四分之一椭圆要满足的条件，其中一个角的水平和垂直半径值都设为100%，其它三个角都设为0

《CSS SECRETS》