使用border-radius绘制椭圆

border-radius总共接受8个值，前4个为水平方向上的值，后4个为垂直方向；

border-radius: 50px 50px 50px 50px/25px 25px 25px 25px;

水平方向和垂直方向上的4个值顺序都是左上，右上，右下，左下。

以水平方向为例(可以通过审查元素查看样式)：

设置第一个值为10px,其他50px：

 

当水平方向的都为25px，垂直为50px时：

 

只需将宽度改为50px:

 

 

如果想绘制水平的椭圆： 

 

在绘制水平椭圆时使用了简写的方式border-radius: 50px/25px;简写的写法类似padding和margin

转载于:https://www.cnblogs.com/tangcaiye/p/3608175.html