CSS - border-end-end-radius 属性



CSS border-end-end-radius 属性定义了元素的块级结尾和内联结尾边之间角的圆角半径。此属性是逻辑边框半径,这意味着它的值取决于元素的书写模式、方向和文本方向。

语法

border-end-end-radius: 0 | length | percentage | initial | inherit;

属性值

描述
0 没有圆角效果。默认值。
长度值 使用长度值定义块级结尾和内联结尾角的圆度。
百分比 使用百分比值定义块级结尾和内联结尾角的圆度。
initial 将属性设置为其默认值。
inherit 从父元素继承属性。

Explore our latest online courses and learn new skills at your own pace. Enroll and become a certified expert to boost your career.

CSS border-end-end-radius 属性示例

以下示例说明了使用不同值的 border-end-end-radius 属性。

值为零的 border-end-end-radius

为了在块级和内联角的末尾不产生任何圆角效果,可以使用 0。在以下示例中,使用了 0 值。

示例

Open Compiler
<!DOCTYPE html> <html> <head> <style> .rounded-box { width: 150px; height: 150px; border: 3px solid green; border-end-end-radius: 0; } </style> </head> <body> <h2> CSS border-end-end-radius property </h2> <div class="rounded-box"> No rounded corner for block-end and inline-end corner. </div> </body> </html>

使用长度值的 border-end-end-radius

为了在块级和内联角的末尾产生圆角效果,可以使用长度值(例如 10px)来指定半径。在以下示例中,使用了 80px 值。

示例

Open Compiler
<!DOCTYPE html> <html> <head> <style> .rounded-box1 { width: 150px; height: 150px; border: 3px solid green; border-end-end-radius: 80px; } .rounded-box2 { width: 150px; height: 150px; border: 3px solid green; border-end-end-radius: 80px 80px; } </style> </head> <body> <h2> CSS border-end-end-radius property </h2> <p class="rounded-box1"> Rounded corner for block-end and inline-end corner with single value. </p> <p class="rounded-box2"> Rounded corner for block-end and inline-end corner with two values. </p> </body> </html>

使用百分比值的 border-end-end-radius

为了在块级和内联角的末尾产生圆角效果,可以使用百分比值(例如 10%)来指定半径。在以下示例中,使用了 50% 值。

示例

Open Compiler
<!DOCTYPE html> <html> <head> <style> .rounded-box1 { width: 150px; height: 150px; border: 3px solid green; border-end-end-radius: 50%; } .rounded-box2 { width: 150px; height: 150px; border: 3px solid green; border-end-end-radius: 50% 50%; } </style> </head> <body> <h2> CSS border-end-end-radius property </h2> <p class="rounded-box1"> Rounded corner for block-end and inline-end corner with single value. </p> <p class="rounded-box2"> Rounded corner for block-end and inline-end corner with two values. </p> </body> </html>

带有方向的 border-end-end-radius

border-end-end-radius 的上下文中,direction 参数决定要圆哪个角。在 LTR 方向上,右下角是圆的,而在 RTL 方向上,左下角是圆的。LTR 是默认方向。这些在以下示例中显示。

示例

Open Compiler
<!DOCTYPE html> <html> <head> <style> #right { width: 150px; height: 150px; border: 3px solid green; border-end-end-radius: 120px 60px; direction: ltr; } #left { width: 150px; height: 150px; border: 3px solid green; border-end-end-radius: 120px 60px; direction: rtl; } </style> </head> <body> <h2> CSS border-end-end-radius property </h2> <p id="right"> block-end and inline-end rounded corner using direction: ltr </p> <p id="left"> block-end and inline-end rounded corner using direction: rtl </p> </body> </html>

带有书写模式的 border-end-end-radius

border-end-end-radius 属性可以与 writing-mode: vertical-lr 一起使用,它将文本垂直排列为从上到下,从左到右。类似地,使用 writing-mode: vertical-rl,它将文本垂直排列为从上到下,从右到左。这些在以下示例中显示。

示例

Open Compiler
<html> <head> <style> .rounded-box { width: 150px; height: 150px; border: 3px solid green; margin: 10px; } .top-left-lr { border-end-end-radius: 30%; writing-mode: vertical-lr; } .top-left-rl { border-end-end-radius: 30%; writing-mode: vertical-rl; } </style> </head> <body> <h2> CSS border-end-end-radius property </h2> <div class="rounded-box top-left-lr"> block-end and inline-end rounded corner using vertical-lr. </div> <div class="rounded-box top-left-rl"> block-end and inline-end rounded corner using vertical-rl. </div> </body> </html>

支持的浏览器

属性 Chrome Edge Firefox Safari Opera
border-end-end-radius 89.0 89.0 66.0 15.0 75.0
css_properties_reference.htm
广告