元素形状之“自适应的椭圆”_html/css_WEB-ITnose

设计场景

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

解决方案

结构

<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》