CSS3 - 圆角


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

可能的值

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

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

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

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

    • 负值无效。

适用于

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

DOM语法

object.style.borderRadius = "length";

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

边界半径

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

价值 描述
半径 是设置元素所有四个角的半径的 <length> 或 <percentage>。它仅用于单值语法。
左上和右下 是设置元素左上角和右下角半径的 <length> 或 <percentage>。它仅在二值语法中使用。
右上角和左下角 是设置元素右上角和左下角半径的 <length> 或 <percentage>。它仅用于二值和三值语法。
左上方 是设置元素左上角半径的 <length> 或 <percentage>。它用于三值和四值语法。
右上 是设置元素右上角半径的 <length> 或 <percentage>。它仅在四值语法中使用。
右下角 是设置元素右下角半径的 <length> 或 <percentage>。它仅用于三值和四值语法。
左下方 是设置元素左下角半径的 <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"> 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 圆角图像

您可以使用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>

CSS border-radius - 相关属性

以下是与 border-radius 相关的 CSS 属性列表:

财产 价值
左上边框半径 设置元素边框左上角的圆度。
右上边界半径 设置元素边框右上角的圆度。
右下边界半径 设置元素边框右下角的圆度。
左下边框半径 设置元素边框左下角的圆度。
边界起始半径 设置元素边框的块起始角和内联起始角的圆度。
边界起点半径 设置元素边框的块起始角和行内结束角的圆度。
边界-结束-开始-半径 设置元素边框的块结束角和行内开始角的圆度。
边界-末端-末端-半径 设置元素边框的块端和内联端角的圆度。