Css 简明教程

CSS - Rounded Corners

使用 border-radius 属性创建 CSS 圆角。该属性允许你指定元素外边框边缘的圆角半径。

Possible Values

<length> ：使用长度值表示圆的半径大小。负值无效。
<percentage> ：使用百分比值表示圆的半径大小。水平轴百分比引用方框宽度。垂直轴百分比引用方框高度。负值无效。

Applies to

除表格和 inline-table 元素外，所有 HTML 元素都已 border-collapse 设置为折叠。适用于 ::first-letter 。

DOM Syntax

object.style.borderRadius = "length";

下图演示了供参考的不同边框圆角：

下表显示圆角的可能值，如下所示 −

Value

Description

radius

是一个 <length> 或 <percentage>，它设置元素所有四个角的半径。它只用于一个值语法。

top-left and bottom-right

是一个 <length> 或 <percentage>，用来设置元素左上角和右下角的半径。它只用于两个值的语法。

top-right and bottom-left

是一个 <length> 或 <percentage>，用来设置元素右上角和左下角的半径。它只用于两个和三个值的语法。

top-left

是一个 <length> 或 <percentage>，用来设置元素左上角的半径。它用于三个和四个值的语法。

top-right

是一个 <length> 或 <percentage>，用来设置元素右上角的半径。它只用于四个值的语法。

bottom-right

是一个 <length> 或 <percentage>，用来设置元素右下角的半径。它只用于三个和四个值的语法。

bottom-left

是一个 <length> 或 <percentage>，用来设置元素左下角的半径。它只用于四个值的语法。

CSS Border Radius - Length Value

以下示例说明了如何使用 border-radius 属性为框的四个角创建圆角 −

<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 属性在框、边框和图像上创建圆角。

示例如下：

<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 属性在元素上创建不同的圆角样式。

示例如下：

<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 属性在元素上创建不同的圆角样式。

示例如下：

<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 属性创建圆和椭圆。

示例如下：

<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>