使用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