上查看所有课程
CSS border-radius 属性用于为元素的边框定义圆角。例如，
h1 {
border-radius: 12px;
}
在这里，border-radius 属性将 h1 元素的边框圆角设置为 12px。
CSS border-radius 语法
border-radius 属性的语法如下：
border-radius: value | initial | inherit;这里，
value：以单位（如px、pt、em、%等）指定边框的半径initial：将属性值设置为0（默认值）inherit：继承其父元素的属性值。
示例：CSS border-radius 示例
让我们看一个 border-radius 属性的示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>CSS border-radius</title>
</head>
<body>
<p class="border-radius-4px">border-radius: 4px;</p>
<p class="border-radius-12px">border-radius: 8px;</p>
<p class="border-radius-percentage">border-radius: 20%;</p>
</body>
</html>/* common styles for all p */
p {
border: 6px solid black;
padding: 12px;
background-color: skyblue;
}
p.border-radius-4px {
border-radius: 4px;
}
p.border-radius-12px {
border-radius: 12px;
}
p.border-radius-percentage {
border-radius: 20%;
}浏览器输出
上面的示例说明了 border-radius 如何与不同的值一起使用。
使用 border-radius 属性创建圆形
当指定的半径值等于元素高度和宽度的一半时，border-radius 属性可以创建圆形。例如，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>CSS border-radius</title>
</head>
<body>
<h2>border-radius: 150px;</h2>
<div></div>
</body>
</html>div {
width: 150px;
height: 150px;
background-color: skyblue;
border: 8px solid black;
/* radius value is half of width and height */
border-radius: 150px; /* equivalent to 50% */
}浏览器输出
注意：如果元素的宽度和高度不相等，则不会创建圆形。
使用 border-radius 属性创建椭圆形
border-radius 属性接受两个值来创建椭圆形。这两个值分别代表水平半径和垂直半径。
让我们看一个例子，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>CSS border-radius</title>
</head>
<body>
<h2>border-radius: 50% / 45%;</h2>
<div></div>
</body>
</html>/* styles all div */
div {
width: 300px;
height: 150px;
background-color: skyblue;
border: 8px solid black;
/* horizontal-radius | vertical-radius */
border-radius: 50% / 45%;
}浏览器输出
注意：水平半径和垂直半径值必须用斜杠（/）分隔，否则该属性将作为简写属性来圆化边框的对角线。
CSS border-radius 属性作为简写
border-radius 属性可以作为简写属性，用于指定边框所有四个角的半径。例如，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>CSS border-radius</title>
</head>
<body>
<p>border-radius: 12px;</p>
<div class="one-value"></div>
<p>border-radius: 18px 30px;</p>
<div class="two-value"></div>
<p>border-radius: 12px 20px 4px;</p>
<div class="three-value"></div>
<p>border-radius: 12px 16px 8px 20px;</p>
<div class="four-value"></div>
</body>
</html>/* styles all div */
div {
width: 80px;
height: 60px;
background-color: skyblue;
border: 4px solid black;
}
div.one-value {
/* applies to all corners */
border-radius: 12px;
}
div.two-value {
/* first value: top-left and bottom-right corner radius
second value: top-right and bottom-left corner radius*/
border-radius: 18px 30px;
}
div.three-value {
/* first value: top-left corner radius
second value: top-right and bottom-left corner radius
third value: bottom-right corner radius */
border-radius: 12px 20px 4px;
}
div.four-value {
/* top-left radius | top-right radius | bottom-right radius | bottom-left radius */
border-radius: 12px 16px 28px 20px;
}浏览器输出
上面的示例说明了如何使用 border-radius 的值作为简写来创建元素边框各个角的边框半径。
CSS border-radius 的组成属性
CSS
border-top-left-radius 属性border-top-left-radius 属性用于为元素的左上角边框添加半径。例如，
div {
border-top-left-radius: 20px;
}浏览器输出
CSS
border-top-right-radius 属性border-top-right-radius 属性用于为元素的右上角边框添加半径。例如，
div {
border-top-right-radius: 20px;
}浏览器输出
CSS
border-bottom-right-radius 属性border-bottom-right-radius 属性用于为元素的右下角边框添加半径。例如，
div {
border-bottom-right-radius: 20px;
}浏览器输出
CSS
border-bottom-left-radius 属性border-bottom-left-radius 属性用于为元素的左下角边框添加半径。例如，
div {
border-bottom-left-radius: 20px;
}浏览器输出
