border-radius 属性用于为元素的外边框边缘制作圆角。
border-radius 属性是 CSS3 属性之一。
此属性是 border-top-left-radius、border-top-right-radius、border-bottom-right-radius 和 border-bottom-left-radius 属性的简写属性，用于分开设置元素的四个角。
但是可以使用 border-radius 属性同时定义所有四个角。
它可以具有一到四个值。
如果设置了所有四个值，它们分别代表左上、右上、右下和左下边框。
如果缺少左下角，则与右上角相同，如果省略右下角，则与左上角相同，如果仅定义一个值，则对所有四个角均等使用。
边界半径属性指定为：
- 一个、两个、三个或者四个长度或者百分比值，用于设置角的单个半径。
- 后跟可选的斜杠 (/) 和一个、两个、三个或者四个长度或者百分比值。这用于设置另外的半径，因此我们可以有椭圆角。
第一组 (1-4) 值定义所有四个角的水平半径。
可选的第二组值，以斜线开头，定义所有四个角的垂直半径。
如果仅提供一组值，则这些值将用于相等地确定垂直和水平半径。
| 初始值 | 0 |
|---|---|
| 应用于 | 所有元素。它也适用于::first-letter。 |
| 继承 | 无效 |
| 可动画的 | 速记的每个属性都可以设置动画。 |
| 版本 | CSS3 |
| DOM 语法 | object.style.borderRadius=“20px”； |
语法
border-radius: 1-4 length | 1-4 length (%) | initial | inherit;
边框半径属性border-radius的示例：
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
height: 40px;
width: 50%;
background: #ccc;
border: 4px solid #1c87c9;
border-radius: 10px;
}
</style>
</head>
<body>
<h2>Border-radius 示例</h2>
<div></div>
</body>
</html>
为了获得最佳的浏览器支持，对于 Firefox，我们应该使用 -moz 作为前缀，对于 Safari、Chrome 和其他浏览器，我们应该使用 -webkit 作为前缀。
目前，Firefox 版本支持不带 -moz- 前缀的 border-radius 属性。
请参阅带有 -mozand -webkitprefixes 的示例，其中为 border-radius 属性定义了两个不同的值：百分比和像素。
带有 -moz- 和 -webkit- 前缀的 border-radius 属性示例：
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.radius-pixel {
height: 40px;
background: #ccc;
border: 4px solid #1c87c9;
border-radius: 12px;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
}
.radius-percent {
width: 120px;
height: 120px;
margin-top: 20px;
background: #ccc;
border: 4px solid #1c87c9;
border-radius: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
}
</style>
</head>
<body>
<h2> 带有-moz- 和 -webkit- 的Border-radius示例</h2>
<div class="radius-pixel"></div>
<div class="radius-percent"></div>
</body>
</html>
我们还可以为具有背景颜色或者背景图像的元素设置边框半径。
具有 background-color 和 background-image 属性的 border-radius 属性示例：
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.radius-bg {
width: 250px;
height: 200px;
background: #ccc;
border: 4px solid #1c87c9;
border-radius: 12px;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
}
.radius-img {
width: 250px;
height: 200px;
margin-top: 20px;
background-img: lightgray;
background: url('bg.jpg');
background-position: left top;
background-repeat: repeat;
border: 2px solid #1c87c9;
border-radius: 25px;
-webkit-border-radius: 25px;
-moz-border-radius: 25px;
}
</style>
</head>
<body>
<h1> </h1>
<div class="radius-bg">带背景颜色的Border-radius示例</div>
<h2> 带背景图片的Border-radius示例</h2>
<div class="radius-img"></div>
</body>
</html>
现在让我们看一个示例，其中包含各种具有不同边框半径值的框，这些框形成了框的形状。
具有多个值的 border-radius 属性示例：
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
width: 250px;
height: 150px;
border: solid 3px #1c87c9;
background: #1c87c9;
}
.radius_1 {
border-radius: 25px;
-moz-border-radius: 25px;
-webkit-border-radius: 25px;
}
.radius_2 {
border-radius: 25% 10%;
-moz-border-radius: 25% 10%;
-webkit-border-radius: 25% 10%;
}
.radius_3 {
border-radius: 10% 30% 50% 70%;
-moz-border-radius: 10% 30% 50% 70%;
-webkit-border-radius: 10% 30% 50% 70%;
}
.radius_4 {
border-radius: 10%/50%;
-moz-border-radius: 10%/50%;
-webkit-border-radius: 10%/50%;
}
.radius_5 {
border-radius: 10px 100px/120px;
-moz-border-radius: 10px 100px/120px;
-webkit-border-radius: 10px 100px/120px;
}
.radius_6 {
border-radius: 25% 10%;
-moz-border-radius: 25% 10%;
-webkit-border-radius: 25% 10%;
}
.radius_7 {
border-radius: 50% 20%/10% 40%;
-moz-border-radius: 50% 20%/10% 40%;
-webkit-border-radius: 50% 20%/10% 40%;
}
.radius_8 {
border-radius: 50%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
}
</style>
</head>
<body>
<h1> Border-radius examples</h1>
<div class="radius_1"></div>
<br />
<div class="radius_2"></div>
<br />
<div class="radius_3"></div>
<br />
<div class="radius_4"></div>
<br />
<div class="radius_5"></div>
<br />
<div class="radius_6"></div>
<br />
<div class="radius_7"></div>
<br />
<div class="radius_8"></div>
</body>
</html>
CSS border-radius 属性值说明
| 值 | 说明 |
|---|---|
| length | 设置角的圆角大小。 |
| % | 以百分比为单位设置角的舍入大小。 |
| initial | 使属性使用其默认值。 |
| inherit | 从父元素继承属性。 |
日期：2020-06-02 22:14:19 来源：oir作者：oir