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

属性值

  • <length>:圆的大小使用长度值表示半径。负值无效。

  • <percentage>:使用百分比值表示圆半径的大小。

    • 横轴百分比指的是框的宽度。

    • 纵轴百分比指的是框的高度。框。

    • 负值无效。

适用范围

所有 HTML 元素，除了 border-collapse 设置为折叠的 table 和 inline-table 元素。适用于 ::first-letter。

DOM 语法

object.style.borderRadius = "length";

下图展示了不同的 border-radius 角以供参考:

border-radius

下表显示了圆角的可能值如下 -

值描述
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>，用于设置元素左下角的半径。仅在四值语法中使用。
单独的边框半径属性，例如 border-top-left-radius，不能从其父元素继承。相反，您必须使用单独的普通属性来设置每个角的边框半径。

CSS 边框半径 - 长度值

以下示例演示如何使用 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">
     这是一个圆角盒子。
   </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(/css/images/tree.jpg);
      background-size: 100% 100%;
      border-radius: 20%;
      width: 200px;
      height: 150px;
   }
</style>
</head>
<body>
   <div class="rounded-box">
      这是一个圆角盒子。
   </div>
   <div class="border-box">
      这是一个圆角盒子。
   </div>
   <div class="img-border-radius">
      这是圆角图像。
   </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">
      左上角圆角。
   </div>
   <div class="rounded-box tr">
      右上角圆角。
   </div>
   <div class="rounded-box bl">
      左下角圆角。
   </div>
   <div class="rounded-box br">
      右下角圆角。
   </div>
   <div class="rounded-box tl-br">
      左上角和右下角圆角。
   </div>
   <div class="rounded-box tr-bl">
      右上角和左下角圆角。
   </div>
</body>
</html>

CSS 圆角图像

您可以使用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>左上角圆角。</h4>
   <img class="top-left" src="/css/images/tree.jpg" />
   <h4>右上角圆角。</h4>
   <img class="top-right" src="/css/images/tree.jpg" />
   <h4> 左下圆角。</h4>
   <img class="bottom-left" src="/css/images/tree.jpg" />
   <h4>右下圆角。</h4>
   <img class="bottom-right" src="/css/images/tree.jpg" />
   <h4>左上角和右下角圆角。</h4>
   <img class="tl-br" src="/css/images/tree.jpg" />
   <h4>右上角和左下角圆角。</h4>
   <img class="tr-bl" src="/css/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">
      圆
   </div>
   <div class="rounded-ellipse">
      椭圆
   </div>
</body>
</html>

CSS border-radius: 相关属性

以下是与 border-radius:

属性值
border-top-left-radius设置元素边框左上角的圆度。
border-top-right-radius设置元素边框右上角的圆度。
border-bottom -right-radius设置元素边框右下角的圆度。
border-bottom-left-radius设置元素边框左下角的圆度。
border-start-start-radius设置圆角元素边框的块起始角和内联起始角。
border-start- end-radius设置元素边框的块起始角和行内结束角的圆度。
border-end-start-radius设置元素边框的块结束角和内联起始角的圆度.
border-end-end-radius设置元素边框的块端和内联端角的圆度。