使用border-radius画圆、半圆、扇形

使用border-radius画圆、半圆、扇形

!!!注意:ie9以下的浏览器是不支持 border-radius属性的

border-radius的数值有三种表式方法:px、%、em。这里说明一下 em是倍数 1em=16px

border-radius可以设置水平和垂直方向的半径border-radius:10px/20px 如果省略垂直方向的半径,则默认与水平半径相等border-radius:10px 等效于border-radius:10px/10px

border-radius的多值书写:

  • 一个值时:border-radius:10px:表示四个角的半径
  • 两个值时:border-radis:10px 20px:10表示左上右下的角,20表示右上左下的角
  • 三个值时:border-radius:10px 20px 30px:10表示左上角,20表示右上左下的角,30表示右下角
  • 四个值时:border-radius:10px 20px 30px 40px:10表示左上,20表示右上,30表示右下,40表示左下(顺时针)

了解前面的知识后,开始动手完成本文目标

<head></
  • 5
    点赞
  • 15
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值