CSS3中border-radius的使用方法：实例讲解用border-radius画一个圆
在CSS3新增的属性中，border-radius是实现元素圆角效果的核心属性，它可以让原本棱角分明的矩形、正方形等元素变得圆润，也支持通过不同的参数配置实现圆形、半圆形、扇形等复杂形状。本文将先介绍border-radius的基本语法，再通过完整实例讲解如何用该属性画一个标准的圆。
一、border-radius的基本语法
border-radius是一个简写属性，用于设置元素四个角的圆角半径，它的完整语法包含水平半径和垂直半径两个维度，默认情况下水平半径和垂直半径相等。常见的基础用法有以下几种：
- 单值语法：
border-radius: 10px;，四个角的圆角半径都为10px - 双值语法：
border-radius: 10px 20px;，左上角和右下角圆角半径为10px，右上角和左下角为20px - 三值语法：
border-radius: 10px 20px 30px;，左上角10px，右上角和左下角20px，右下角30px - 四值语法：
border-radius: 10px 20px 30px 40px;，按左上、右上、右下、左下的顺时针顺序设置四个角的半径
如果需要单独设置某个角的圆角，也可以使用对应的子属性：border-top-left-radius（左上角）、border-top-right-radius（右上角）、border-bottom-right-radius（右下角）、border-bottom-left-radius（左下角）。
半径的取值可以是固定长度（如px、em、rem），也可以是百分比，百分比是相对于元素自身的宽度和高度计算的。
二、用border-radius画圆的核心原理
要画一个标准的圆，需要满足两个前提条件：首先元素本身必须是正方形，也就是宽度和高度相等；其次需要把border-radius的值设置为元素宽度或高度的一半，或者直接使用50%作为百分比值，因为50%的百分比相对于正方形来说，刚好是边长的一半，就能让四个角的弧度完全拼接成圆形。
三、完整实例代码
下面是直接用border-radius画一个红色圆形的完整HTML+CSS代码，代码中包含详细注释说明每一步的作用：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>border-radius画圆实例</title>
<style>
/* 定义圆的样式类 */
.circle {
/* 设置宽度和高度相等，保证是正方形 */
width: 200px;
height: 200px;
/* 设置背景色为红色，方便观察形状 */
background-color: #ff4444;
/* 设置border-radius为50%，正方形下50%等于边长的一半，形成圆形 */
border-radius: 50%;
/* 可选：添加文字居中效果，验证圆形的区域范围 */
display: flex;
justify-content: center;
align-items: center;
color: #fff;
font-size: 16px;
}
</style>
</head>
<body>
<div class="circle">我是圆形</div>
</body>
</html>将上述代码保存为.html文件后，用浏览器打开就能看到一个标准的红色圆形，中间显示“我是圆形”的文字，文字会居中显示在圆形区域内。
四、常见问题说明
很多初学者会疑惑，为什么border-radius设置为50%就能得到圆？这是因为当元素是正方形时，50%的半径会让每个角的圆弧刚好延伸到相邻边的中点，四个角的圆弧拼接起来就形成了一个完整的圆形。如果元素不是正方形，比如宽度是200px，高度是100px，设置border-radius: 50%得到的是椭圆形，不是正圆。
另外，如果使用的是固定像素值设置border-radius，比如正方形边长是200px，那么border-radius需要设置为100px才能得到圆，和设置50%的效果完全一致，实际开发中更推荐使用50%的写法，这样即使后续修改了正方形的尺寸，也不需要同步修改border-radius的值，可维护性更高。