0
点赞
收藏
分享

微信扫一扫

【CSS3】关于border-radius

软件共享软件 2022-03-24 阅读 46
css3

border-radius

完整写法

border-radius: 1-4 length|% / 1-4 length|%;
                 水平半径        垂直半径

常用单位 px % em

  • 仅设置一个值 四个方向统一

  • 设置四个方向 顺序如下

a b c d

a ---- b
|      |
d ---- c
  • 设置两个值
    对角线
a b

a ---- b
|      |
b ---- a
  • 设置三个数值
a b c

a ---- b
|      |
b ---- c

单位

px :半径为px的圆去与边角相切的弧度

% :相对宽高百分比的r1 r2作为椭圆与边角相切的弧度

特殊用法

/* 椭圆 */
border-radius: 50% / 50%
/* 半椭圆 */
border-radius: 50% / 100% 100% 0 0
举报

相关推荐

0 条评论