Css 简明教程
CSS - Rounded Corners
使用 border-radius 属性创建 CSS 圆角。该属性允许你指定元素外边框边缘的圆角半径。
CSS rounded corners are created using the border-radius property. This property allows you to specify the radius of the corners of an element’s outer border edge.
Possible Values
-
<length>: Size of circle radius is denoted, using length values. Negative values are not valid.
-
<percentage>: Size of circle radius is denoted, using percentage values. Horizontal axis percentage is referred to the width of the box. Vertical axis percentage is referred to the height of the box. Negative values are not valid.
Applies to
除表格和 inline-table 元素外，所有 HTML 元素都已 border-collapse 设置为折叠。适用于 ::first-letter 。
All the HTML elements, except for table and inline-table elements with border-collapse set to collapse. Applies to ::first-letter.
DOM Syntax
object.style.borderRadius = "length";下图演示了供参考的不同边框圆角：
The following diagram demonstrates the different border-radius corners for reference:
下表显示圆角的可能值，如下所示 −
The following table shows the possible values for rounded corners as follows −
Value |
Description |
|
radius |
Is a <length> or a <percentage> that sets the radius for all four corners of the element. It is used only in the one-value syntax. |
|
top-left and bottom-right |
Is a <length> or a <percentage> that sets the radius for the top-left and bottom-right corners of the element. It is used only in the two-value syntax. |
|
top-right and bottom-left |
Is a <length> or a <percentage> that sets the radius for the top-right and bottom-left corners of the element. It is used only in the two- and three-value syntaxes. |
|
top-left |
Is a <length> or a <percentage> that sets the radius for the top-left corner of the element. It is used on three and four value syntaxes. |
|
top-right |
Is a <length> or a <percentage> that sets the radius for the top-right corners of the element. It is used only in the four-value syntax. |
|
bottom-right |
Is a <length> or a <percentage> that sets the radius for the bottom-right corners of the element. It is used only in the three and four-value syntaxes. |
|
bottom-left |
Is a <length> or a <percentage> that sets the radius for the bottom-left corners of the element. It is used only in the four-value syntax. |
CSS Border Radius - Length Value
以下示例说明了如何使用 border-radius 属性为框的四个角创建圆角 −
The following example demostrates how to use the border-radius property to create rounded corners for all four corners of a box −
<html>
<head>
<style>
.rounded-box {
width: 200px;
height: 100px;
background-color: pink;
line-height: 100px;
border-radius: 20px;
}
</style>
</head>
<body>
<div class="rounded-box">
This is a rounded corner box.
</div>
</body>
</html>你可以使用 border-radius 属性在框、边框和图像上创建圆角。
You can use the border-radius property to create rounded corners on box, borders, and images.
示例如下：
Here is an example −
<html>
<head>
<style>
.rounded-box {
width: 200px;
height: 100px;
background-color: pink;
border-radius: 20px;
margin-bottom: 10px;
}
.border-box {
width: 200px;
height: 100px;
border-radius: 2em;
border: 3px solid green;
margin-bottom: 20px;
}
.img-border-radius {
background-image: url(images/tree.jpg);
background-size: 100% 100%;
border-radius: 20%;
width: 200px;
height: 150px;
}
</style>
</head>
<body>
<div class="rounded-box">
This is a rounded corner box.
</div>
<div class="border-box">
This is a rounded corner box.
</div>
<div class="img-border-radius">
This is a rounded corner image.
</div>
</body>
</html>你可以使用 border-radius 属性在元素上创建不同的圆角样式。
You can use the border-radius property to create different rounded corner styles on an element.
示例如下：
Here is an example −
<html>
<head>
<style>
.rounded-box {
width: 200px;
height: 100px;
background-color: pink;
margin: 10px;
padding: 5px;
}
.rounded-box.tl {
border-radius: 30px 0 0 0;
}
.rounded-bo x.tr {
border-radius: 0 2em 0 0;
}
.rounded-box.bl {
border-radius: 0 0 0 15%;
}
.rounded-box.br {
border-radius: 0 0 30px 0;
}
.rounded-box.tl-br {
border-radius: 2em 0 2em 0;
}
.rounded-box.tr-bl {
border-radius: 0 15% 0 15%;
}
</style>
</head>
<body>
<div class="rounded-box tl">
top-left rounded corner.
</div>
<div class="rounded-box tr">
top-right rounded corner.
</div>
<div class="rounded-box bl">
bottom-left rounded corner.
</div>
<div class="rounded-box br">
bottom-right rounded corner.
</div>
<div class="rounded-box tl-br">
top-left and bottom-right rounded corners.
</div>
<div class="rounded-box tr-bl">
top-right and bottom-left rounded corners.
</div>
</body>
</html>CSS Rounded Corner Images
你可以使用 border-radius 属性在元素上创建不同的圆角样式。
You can use the border-radius property to create different rounded corner styles on elements.
示例如下：
Here is an example −
<html>
<head>
<style>
img {
width: 200px;
height: 100px;
margin: 10px;
}
.top-left {
border-radius: 30px 0 0 0;
}
.top-right {
border-radius: 0 2em 0 0;
}
.bottom-left {
border-radius: 0 0 0 15%;
}
.bottom-right {
border-radius: 0 0 30px 0;
}
.tl-br {
border-radius: 2em 0 2em 0;
}
.tr-bl {
border-radius: 0 15% 0 15%;
}
</style>
</head>
<body>
<h4>top-left rounded corner.</h4>
<img class="top-left" src="images/tree.jpg" />
<h4>top-right rounded corner.</h4>
<img class="top-right" src="images/tree.jpg" />
<h4> bottom-left rounded corner.</h4>
<img class="bottom-left" src="images/tree.jpg" />
<h4>bottom-right rounded corner.</h4>
<img class="bottom-right" src="images/tree.jpg" />
<h4>top-left and bottom-right rounded corners.</h4>
<img class="tl-br" src="images/tree.jpg" />
<h4>top-right and bottom-left rounded corners.</h4>
<img class="tr-bl" src="images/tree.jpg" />
</body>
</html>我们可以使用 CSS border-radius 属性创建圆和椭圆。
We can create a circle and an ellipse using the CSS border-radius property.
示例如下：
Here is an example −
<html>
<head>
<style>
.rounded-circle {
width: 100px;
height: 100px;
background-color: pink;
text-align: center;
border-radius: 50%;
}
.rounded-ellipse {
width: 200px;
height: 100px;
background-color: pink;
text-align: center;
border-radius: 50%;
}
</style>
</head>
<body>
<div class="rounded-circle">
circle
</div>
<div class="rounded-ellipse">
ellipse
</div>
</body>
</html>CSS border-radius - Related Properties
以下列出了与 border-radius 相关的 CSS 属性：
Following is the list of CSS properties related to border-radius:
property |
value |
Sets the roundness of the top-left corner of an element’s border. |
|
Sets the roundness of the top-right corner of an element’s border. |
|
Sets the roundness of the bottom-right corner of an element’s border. |
|
Sets the roundness of the bottom-left corner of an element’s border. |
|
Sets the roundness of the block-start and inline-start corner of an element’s border. |
|
Sets the roundness of the block-start and inline-end corner of an element’s border. |
|
Sets the roundness of the block-end and inline-start corner of an element’s border. |
|
Sets the roundness of the block-end and inline-end corner of an element’s border. |