CSS3 盒模型 - border-radius 属性

核心知识点

border-radius 属性的语法和用法
border-radius 属性的取值范围
border-radius 属性的简写形式
border-radius 属性的实际应用场景

学习目标

理解 border-radius 属性的基本概念和作用
掌握 border-radius 属性的语法和取值规则
能够使用 border-radius 属性创建各种圆角效果
了解 border-radius 属性的简写形式和使用方法

什么是 border-radius 属性？

border-radius 属性是 CSS3 中用于创建元素圆角效果的属性。通过 border-radius 属性，您可以为元素的四个角设置圆角，从而创建出更加柔和、现代的视觉效果。

border-radius 属性的语法

/* 设置所有角的圆角半径 */
border-radius: <radius>;

/* 分别设置左上、右上、右下、左下四个角的圆角半径 */
border-radius: <top-left> <top-right> <bottom-right> <bottom-left>;

/* 分别设置左上/右下、右上/左下两个角的圆角半径 */
border-radius: <top-left-bottom-right> <top-right-bottom-left>;

/* 分别设置左上、右上/左下、右下三个角的圆角半径 */
border-radius: <top-left> <top-right-bottom-left> <bottom-right>;

/* 设置椭圆圆角（水平半径和垂直半径） */
border-radius: <horizontal-radius> / <vertical-radius>;

border-radius 属性的取值范围

长度值

像素值：如 4px、8px、16px 等
相对单位：如 1em、2rem、3vw 等
绝对单位：如 1pt、2pc、3cm 等

百分比值

百分比：如 10%、25%、50% 等
注意：百分比值是相对于元素的宽度和高度计算的

border-radius 属性的实际应用

示例 1：基本圆角设置

/* 设置所有角为 4px 圆角 */
.box {
  border: 2px solid #333;
  border-radius: 4px;
}

/* 设置所有角为 10px 圆角 */
.card {
  border: 1px solid #ddd;
  border-radius: 10px;
}

/* 设置所有角为 50% 圆角（圆形） */
.circle {
  width: 100px;
  height: 100px;
  border: 2px solid #333;
  border-radius: 50%;
}

示例 2：不同角的圆角设置

/* 左上 4px，右上 8px，右下 12px，左下 16px */
mixed-radius {
  border: 2px solid #333;
  border-radius: 4px 8px 12px 16px;
}

/* 左上/右下 10px，右上/左下 20px */
diagonal-radius {
  border: 2px solid #333;
  border-radius: 10px 20px;
}

/* 左上 5px，右上/左下 10px，右下 15px */
top-left-radius {
  border: 2px solid #333;
  border-radius: 5px 10px 15px;
}

示例 3：椭圆圆角设置

/* 所有角的水平半径为 20px，垂直半径为 10px */
elliptical-radius {
  border: 2px solid #333;
  border-radius: 20px / 10px;
}

/* 左上/右下水平半径为 20px，垂直半径为 10px；右上/左下水平半径为 10px，垂直半径为 20px */
mixed-elliptical-radius {
  border: 2px solid #333;
  border-radius: 20px 10px / 10px 20px;
}

/* 完全椭圆 */
oval {
  width: 200px;
  height: 100px;
  border: 2px solid #333;
  border-radius: 50%;
}

border-radius 属性的简写形式

除了使用完整的 border-radius 属性外，您还可以使用以下简写形式：

分别设置四个角的圆角半径

/* 左上角圆角半径 */
border-top-left-radius: <radius>;

/* 右上角圆角半径 */
border-top-right-radius: <radius>;

/* 右下角圆角半径 */
border-bottom-right-radius: <radius>;

/* 左下角圆角半径 */
border-bottom-left-radius: <radius>;

/* 设置椭圆圆角 */
border-top-left-radius: <horizontal-radius> / <vertical-radius>;
border-top-right-radius: <horizontal-radius> / <vertical-radius>;
border-bottom-right-radius: <horizontal-radius> / <vertical-radius>;
border-bottom-left-radius: <horizontal-radius> / <vertical-radius>;

实践练习

练习 1：创建不同圆角的卡片

创建一个 HTML 页面，包含以下元素：

一个带有 4px 圆角的普通卡片
一个带有 8px 圆角的中等圆角卡片
一个带有 16px 圆角的大圆角卡片
一个带有 50% 圆角的圆形卡片

练习 2：创建不规则圆角效果

创建一个 HTML 页面，包含一个带有不规则圆角的元素，例如：

左上角：10px 圆角
右上角：20px 圆角
右下角：30px 圆角
左下角：40px 圆角

练习 3：创建椭圆和胶囊形状

创建一个 HTML 页面，包含以下元素：

一个椭圆形状的元素（宽度是高度的两倍，50% 圆角）
一个胶囊形状的按钮（高度较小，50% 圆角）
一个带有椭圆圆角的元素（水平半径和垂直半径不同）

总结

本教程详细介绍了 CSS3 中的 border-radius 属性，包括其语法、取值范围和实际应用。通过本教程的学习，您应该能够：

理解 border-radius 属性的基本概念和作用
掌握 border-radius 属性的语法和取值规则
能够使用 border-radius 属性创建各种圆角效果
了解 border-radius 属性的简写形式和使用方法

border-radius 属性是 CSS3 中用于创建圆角效果的重要属性，它可以帮助您创建出更加柔和、现代的视觉效果。在实际开发中，您可以根据需要选择合适的圆角半径，为页面增添美观度和专业感。