文档库

Appearance

圆角 ​

border-radius ​

常用属性值：

  • 数字
css
border-radius: 10px;
  • 百分比
border-radius: 50%;
  • 支持多个值，控制四个圆角
css

/*对角线：↖↘10px ，↗↙ 20px*/
border-radius: 10px 20px;

/*↖ 10px ↗↙ 20px ↘ 30px*/
border-radius: 10px 20px 30px;

/* 4个值（↖开始，顺时针） */
border-radius: 10px 20px 30px 40px;

常见场景：

  • 圆形：正方形+圆角是边的一半
css
width:100px;
height:100px;
border-radius: 50%;/*或者50px*/
  • 胶囊按钮：矩形+圆角是短边的一半
css
width:100px;
height:20px;
border-radius: 50%;/*或者10px*/

提示

img标签也可以设置border-radius，效果与box model相同

原理 ​

border-radius本质上就是根据指定值为半径画圆，然后裁去多余的部分

image-20251018174625442