html如何把上边角做成椭圆,CSS3 利用border-radius实现椭圆边

需求

我们在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%;

}