第一部分：核心概念 —— 什么是“圆角分”？
“圆角分”指的是给一个元素的四个角设置不同半径的圆角。
我们先从“圆角”说起：
- 圆角：就是我们平时看到的矩形，它的四个角不是直的，而是带有一点弧度的，比如我们常见的按钮、卡片，在 CSS 中，我们用
border-radius属性来设置。 - 分：这个“分”字是关键，它代表“分别”、“各自不同”的意思。
“圆角分”就是打破常规的“四个角都一样”的设定，允许你为左上、右上、右下、左下这四个角，独立设置不同的圆角大小。
第二部分：为什么需要“圆角分”？
灵活地控制每个角的圆角,可以创造出更丰富、更独特的视觉效果，让你的设计不再千篇一律。
常见应用场景：
- UI/UX 设计：创建不规则的、有设计感的卡片、对话框、头像容器等。
- 品牌标识：为某个品牌或项目设计独特的视觉元素，比如一个带有特定圆角组合的图标或徽章。
- 内容展示：通过不同的圆角组合来引导用户的视觉流向，或区分不同层级的内容。
- 创意设计：实现一些特殊形状，云朵”形状的标签，“对话气泡”等。
第三部分：如何实现“圆角分”？（CSS 语法详解）
在 CSS 中，实现“圆角分”主要通过 border-radius 属性的多种写法，我们按从简单到复杂的顺序来看。
四个值（最常用、最直观）
这是实现“圆角分”最清晰、最推荐的方式，值的顺序是顺时针排列的：
语法：
border-radius: [左上角] [右上角] [右下角] [左下角];
示例：
假设我们有一个 <div class="box-1">，我们想让它左上角和右下角是圆角，而右上角和左下角是直角。
.box-1 {
width: 200px;
height: 100px;
background-color: #4CAF50;
/*
左上角: 20px
右上角: 0px (直角)
右下角: 40px
左下角: 0px (直角)
*/
border-radius: 20px 0 40px 0;
}
效果：
记忆技巧： 想象你从一个角的左上角开始，顺时针画一圈，依次经过右上、右下、左下，最后回到左上，这就是四个值的顺序。
三个值
当相邻的两个角的圆角值相同时,可以简化。
语法：
border-radius: [左上角] [右上/左下角] [右下角];
解释：
- 第一个值：左上角
- 第二个值：右上角和左下角（这两个角会使用相同的值）
- 第三个值：右下角
示例：
.box-2 {
width: 200px;
height: 100px;
background-color: #2196F3;
/*
左上角: 30px
右上角和左下角: 都是 10px
右下角: 50px
*/
border-radius: 30px 10px 50px;
}
效果：
两个值
当对角的两个圆角值相同时,可以进一步简化。
语法：
border-radius: [左上/右下角] [右上/左下角];
解释：
- 第一个值：左上角和右下角（这两个角会使用相同的值）
- 第二个值：右上角和左下角（这两个角会使用相同的值）
示例：
.box-3 {
width: 200px;
height: 100px;
background-color: #FF9800;
/*
左上角和右下角: 都是 25px
右上角和左下角: 都是 10px
*/
border-radius: 25px 10px;
}
效果：
一个值
这是最简单的情况,四个角都使用相同的圆角值，就是我们最常见的“圆角矩形”或“圆形”。
语法：
border-radius: [所有角的值];
示例：
.box-4 {
width: 200px;
height: 100px;
background-color: #9C27B0;
/* 四个角都是 15px */
border-radius: 15px;
}
效果：
第四部分：进阶技巧 —— 水平/垂直分开
除了上述的顺时针写法,border-radius 还支持更精细的控制，可以分别设置水平方向和垂直方向的半径。
语法：
border-radius: [水平半径] / [垂直半径];
示例： 创建一个“椭圆”形状的盒子，水平方向拉长，垂直方向压扁。
.box-5 {
width: 200px;
height: 100px;
background-color: #E91E63;
/*
水平半径: 100px (是宽度的一半，所以左右会变成半圆)
垂直半径: 50px (是高度的一半，所以上下会变成半圆)
*/
border-radius: 100px / 50px;
}
效果：
更复杂的组合： 你甚至可以将四种写法结合起来，实现非常精细的控制。
语法：
border-radius: [左上水平] [右上水平] [右下水平] [左下水平] / [左上垂直] [右上垂直] [右下垂直] [左下垂直];
示例：
.box-6 {
width: 200px;
height: 100px;
background-color: #00BCD4;
/*
水平方向 (顺时针): 30px 0 40px 0
垂直方向 (顺时针): 15px 0 20px 0
*/
border-radius: 30px 0 40px 0 / 15px 0 20px 0;
}
效果：
第五部分：实战演练
目标： 创建一个类似“对话气泡”的卡片，只有左上角和右下角有圆角。
HTML 结构：
<div class="chat-bubble"> <p>你好！这是一个带有圆角分的对话气泡。</p> </div>
CSS 样式：
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f0f2f5;
font-family: sans-serif;
}
.chat-bubble {
/* 1. 基础尺寸和背景 */
width: 300px;
padding: 20px;
background-color: white;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
/* 2. 核心圆角分设置 */
/* 左上角大圆角，右下角小圆角，另外两个角是直角 */
border-radius: 30px 0 15px 0;
}
最终效果：
总结与要点回顾
- 核心思想：“圆角分”就是分别控制四个角的圆角半径。
- 主要语法：使用
border-radius属性。 - 推荐写法：使用四个值的顺时针写法（
左上 右上 右下 左下），因为它最直观，不易出错。 - 简化规则：
- 一个值：四个角相同。
- 两个值：对角相同（左上=右下，右上=左下）。
- 三个值：左上、右下独立，右上和左下相同。
- 进阶技巧：使用
水平半径 / 垂直半径的语法可以创建椭圆形或不规则弧度。 - 实践应用：从简单的“两角圆角”开始练习，逐步尝试更复杂的组合，你会发现
border-radius是一个非常强大的工具。
