圆角边框 (border-radius)

学习

圆角边框 (border-radius)

2026-02-23/0/ 编辑

圆角边框 (border-radius)

一、border-radius 概述

border-radius 用来设置元素的(4个方向)外边框 1/4 圆角效果。

圆角类型

圆角类型描述举例
圆角边框当使用一个半径时,确定一个圆border-radius: 50px;
椭圆边框当使用两个半径时,确定一个椭圆border-radius: 50px / 30px;

注: 圆角效果就是这个椭圆或圆与边框的交集形成的 1/4 圆角效果。

二、圆角边框

基本语法

/* 四个方向上圆角的半径为 50px */
border-radius: 50px;

案例演示

<style>
  .box {
    width: 100px;
    height: 100px;
    border: 2px solid skyblue;
  }
  .circle {
    width: 100px;
    height: 100px;
    background-color: khaki;
    /* 上右下左 4 个方向边框的圆角半径大小 50px */
    border-radius: 50px;
  }
</style>
<body>
  <div class="box">
    <div class="circle"></div>
  </div>
</body>

说明: 四个方向(左上角、右上角、左下角、右下角)上的圆角效果,就是 border-radius 属性确定的圆与对应边框相切形成的 1/4 的圆角效果。

三、椭圆边框

基本语法

/*
  x 表示椭圆水平半径
  y 表示椭圆垂直半径
*/
border-radius: x/y;

/* 20px 表示椭圆水平半径 */
/* 50px 表示椭圆垂直半径 */
border-radius: 80px/100px;

案例演示

<style>
  .oval {
    width: 100px;
    height: 100px;
    background-color: pink;
    border-radius: 80px/100px;
  }
</style>
<body>
  <div class="oval"></div>
</body>

说明: 四个方向(左上角、右上角、左下角、右下角)上的圆角效果,就是 border-radius 属性确定的椭圆与对应边框相切形成的 1/4 的椭圆效果。

四、border-radius 四种不同值写法

圆角边框 - 四种写法

写法举例说明
单值写法border-radius:50px;表示上右下左四个方向的圆角半径
双值写法border-radius:30px 50px;第一个值表示左上角和右下角,第二个值表示右上角和左下角
三值写法border-radius:30px 50px 80px;第一个值表示左上角,第二值表示右上角和左下角,第三值表示右下角
四值写法border-radius:10px 20px 30px 40px;四个值,分别表示左上角、右上角、右下角、左下角

1. 单值写法

/* 四个方向的圆角半径为 50px */
border-radius: 50px;
<style>
  .box {
    width: 100px;
    height: 100px;
    background-color: pink;
    border-radius: 50px;
  }
</style>

2. 双值写法

/* 
  30px 表示左上角和右下角 圆角半径
  50px 表示右上角和左下角 圆角半径
*/
border-radius: 30px 50px;
<style>
  .box {
    width: 100px;
    height: 100px;
    background-color: pink;
    border-radius: 30px 50px;
  }
</style>

3. 三值写法

/* 
  30px 表示左上角 圆角半径
  10px 表示右上角和左下角 圆角半径
  50px 表示右下角 圆角半径
*/
border-radius: 30px 10px 50px;
<style>
  .box {
    width: 100px;
    height: 100px;
    background-color: pink;
    border-radius: 30px 10px 50px;
  }
</style>

4. 四值写法

/* 
  10px 表示左上角 圆角半径
  20px 表示右上角 圆角半径
  30px 表示右下角 圆角半径
  50px 表示左下角 圆角半径
*/
border-radius: 10px 20px 30px 50px;
<style>
  .box {
    width: 100px;
    height: 100px;
    background-color: pink;
    border-radius: 10px 20px 30px 50px;
  }
</style>

五、椭圆边框 - 四种不同值写法

注: 反斜杠前面的值表示椭圆水平半径,后面的值表示椭圆的垂直半径。

写法举例描述
单值写法border-radius:50px/30px;50px 表示四个不同方向椭圆水平半径,30px 表示四个不同方向椭圆垂直半径
双值写法border-radius:10px 20px / 30px 50px;左上角和右下角,椭圆水平半径 10px,垂直半径 30px;右上角和左下角,椭圆水平半径 20px,垂直半径 50px
三值写法border-radius:30px 50px 60px /20px 30px 50px;左上角椭圆水平半径 30px,垂直半径 20px;右上角和左下角椭圆水平半径 50px,垂直半径 30px;右下角椭圆水平半径 60px,垂直半径 50px
四值写法border-radius:10px 20px 30px 40px/40px 30px 20px 10px;左上角,右上角,右下角,左下角椭圆的水平半径为 10px 20px 30px 40px;垂直半径为 40px 30px 20px 10px

1. 单值写法

/*
  30px 表示四个不同方向上椭圆水平半径
  50px 表示四个不同方向上椭圆垂直半径
*/
border-radius: 30px/50px;

2. 双值写法

/*
  30px 表示左上角和右下角 椭圆水平半径
  50px 表示右上角和左下角 椭圆水平半径
  80px 表示左上角和右下角 椭圆垂直半径
  100px 表示右上角和左下角 椭圆垂直半径
*/
border-radius: 30px 50px / 80px 100px;

3. 三值写法

/*
  左上角椭圆水平半径30px,垂直半径20px
  右上角和左下角椭圆水平半径 50px,垂直半径30px
  右下角椭圆水平半径60px,垂直半径50px
*/
border-radius: 30px 50px 60px /20px 30px 50px;

4. 四值写法

/* 
  左上角,右上角,右下角,左下角椭圆的水平半径为 10px 20px 30px 40px
  左上角,右上角,右下角,左下角椭圆的垂直半径为 40px 30px 20px 10px
*/
border-radius: 10px 20px 30px 40px/40px 30px 20px 10px;

六、border-radius 的值百分比表示法

基本概念

  • 百分比 % 是相对于当前元素的可视宽和可视高而言
  • 水平半径相当于元素的可视宽而言: 水平半径 = (width+padding+border) * 百分比
  • 垂直半径相当于元素的可视高而言: 垂直半径 = (height+padding+border) * 百分比

计算示例

/*
  如果元素的宽为 100px,高为 200px,内边距为 50px
  则 20%,换算后,
  椭圆水平半径=(100px+ 50px*2)*20%=40px
  椭圆垂直半径=(200px+50px*2)*20%=60px
*/
border-radius: 20%;

/*
  如果元素的宽为 100px,高为 200px
  则 20%,换算后,
  椭圆水平半径为 100px*20%=20px
  椭圆垂直半径为 200px*50%=100px
*/
border-radius: 20%/50%;

案例演示

<style>
  .box {
    width: 400px;
    height: 200px;
    background-color: pink;
    /*
      计算得到
      椭圆水平半径=400 *20%=80px
      椭圆垂直半径=200 *20%=40px
    */
    border-radius: 20%;
  }
</style>
<body>
  <div class="box"></div>
</body>

七、绘制圆形

条件

  • 元素本身是一个正方形
  • 四个方向圆角的直径为正方形边长

代码实现

<style>
  .circle {
    width: 200px;
    height: 200px;
    background-color: red;
    border-radius: 50%;
  }
</style>
<body>
  <div class="circle"></div>
</body>

八、绘制半圆

条件

  • 元素本身是一个长方形,宽与高的比为 2:1
  • 左上角和右上角圆的半径 = 高

代码实现

<style>
  .semicircle {
    width: 200px;
    height: 100px;
    background-color: red;
    /* border-radius: 100px 100px 0 0; */
    border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  }
</style>
<body>
  <div class="semicircle"></div>
</body>

九、单独设置四个方向圆角 - 小属性

属性描述举例
border-top-left-radius左上角border-top-left-radius:20px;
border-top-right-radius右上角border-top-right-radius:20px 30px;
border-bottom-left-radius左下角border-bottom-left-radius:10%;
border-bottom-right-radius右下角border-bottom-right-radius:10% 20%;

小属性主要是用来层叠大属性的

<style>
  .box {
    width: 100px;
    height: 100px;
    background-color: tomato;
    /* 4个方向圆角半径为50px */
    border-radius: 50px;
    /* 左上角圆角半径20px,覆盖大属性 */
    border-top-left-radius: 20px;
  }
</style>
<body>
  <div class="box"></div>
</body>

十、浏览器前缀

设置圆角效果的 border-radius 属性及小属性都需要添加浏览器兼容性前缀。

.element {
  -webkit-border-radius: 10px; /* Chrome, Safari, 旧版 Android/iOS */
  -moz-border-radius: 10px;    /* Firefox 3.6及以下 */
  border-radius: 10px;         /* 标准语法 */
}

.element {
  -webkit-border-top-left-radius: 5px;
  -moz-border-radius-topleft: 5px; /* 注意这里不同 */
  border-top-left-radius: 5px;
  
  /* 其他角同理 */
}

十一、实战应用场景

场景1: 用户头像

.avatar {
  width: 100px;
  height: 100px;
  border-radius: 50%; /* 圆形 */
  overflow: hidden;
}

.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

场景2: 卡片圆角

.card {
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* 不同方向不同圆角 */
.card-special {
  border-radius: 20px 20px 0 0; /* 上面两个角圆角,下面直角 */
}

场景3: 按钮圆角

.button {
  border-radius: 4px;
  padding: 10px 20px;
}

/* 圆形按钮 */
.button-circle {
  width: 50px;
  height: 50px;
  border-radius: 50%;
}

场景4: 徽章/标签

.badge {
  border-radius: 12px;
  padding: 4px 12px;
  font-size: 12px;
}
猜你喜欢