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

设计场景

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

解决方案

结构

登录后复制

风格

立即学习“前端免费学习笔记（深入）”；

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

登录后复制

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

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

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

登录后复制登录后复制登录后复制登录后复制

风格

立即学习“前端免费学习笔记（深入）”；

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

登录后复制

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

登录后复制登录后复制登录后复制登录后复制

风格

立即学习“前端免费学习笔记（深入）”；

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

登录后复制

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

登录后复制登录后复制登录后复制登录后复制

风格

立即学习“前端免费学习笔记（深入）”；

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

登录后复制

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

登录后复制登录后复制登录后复制登录后复制

风格

立即学习“前端免费学习笔记（深入）”；

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

登录后复制

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

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

结构

登录后复制

风格

立即学习“前端免费学习笔记（深入）”；

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

登录后复制

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

《CSS SECRETS》