需求
我们在APP中经常见到大背景图片的底边是椭圆边的设计,看起来比较柔和舒服,这个效果怎么实现?
基础
border-radius: 1-4 length|% / 1-4 length|%;
border-radius的最全写法是:border-radius: 0 0 0 0 / 0 0 0 0;,其中/左侧是四个角的x轴半径,右侧是y轴半径。
如果让你做一个圆角,你肯定没问题,闭着眼睛就知道可以是border-radius: 10px 0 0 0 / 10px 0 0 0;,但是,如果要椭圆角呢?如果是椭圆边呢?
在有没有相关几何知识的前提下,不容易理解x轴半径、y轴半径,也就不容易一笔写出最终答案,但是你可以给8个值都设置上数值,并微调数值,自己感受一下,这种笨办法也能得到答案。
标准椭圆
x轴一律写宽的一半,y轴一律写高的一半,得到标准椭圆。
.a {
width: 400px;
height: 300px;
background-color: blueviolet;
border-radius: 200px 200px 200px 200px / 150px 150px 150px 150px;
}
只底边是椭圆边
.a {
width: 400px;
height: 300px;
background-color: blueviolet;
border-radius: 0 0 200px 200px / 0 0 150px 150px;
}
底边是椭圆的一部分,也即是我们今天要的效果
.a {
width: 400px;
height: 300px;
background-color: blueviolet;
border-radius: 0 0 200px 200px / 0 0 100px 100px;
}
百分比表示的话,可以:
.a {
width: 400px;
height: 300px;
background-color: blueviolet;
border-radius: 0 0 50% 50% / 0 0 66% 66%;
}