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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值