CSS 属性

CSS border-start-end-radius 属性定义元素的块开始侧和内联结束侧之间的角半径。

此属性是逻辑边框半径，这意味着它的值取决于元素的书写模式、方向和文本方向。

属性值

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

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

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

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

    • 负值无效。

适用

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

DOM 语法

object.style.borderStartEndRadius = "length";

CSS border-start-end-radius: <length> 

这里是一个示例如何使用长度值创建块开始和内联结束圆角 -

<html>
<head>
<style>
   .rounded-box {
      width: 150px;
      height: 150px;
      background-color: pink;
      border: 3px solid green;
      margin: 10px;
      border-start-end-radius: 60px 60px;
   }
</style>
</head>
<body>
   <div class="rounded-box">
      block-start and inline-end rounded corner.
   </div>
</body>
</html>

CSS border-start-end-radius: <percentage> 

这里是如何创建的示例使用百分比值的块开始和内联结束圆角 -

<html>
<head>
<style>
   .rounded-box {
      width: 150px;
      height: 150px;
      background-color: pink;
      border: 3px solid green;
      margin: 10px;
      border-start-end-radius: 30% 30%;
   }
</style>
</head>
<body>
   <div class="rounded-box">
      block-start and inline-end rounded corner.
   </div>
</body>
</html>

CSS border-start-end-radius: 动画

这里是如何创建块开始的示例和带动画的 inline-end 圆角 -

<html>
<head>
<style>
   .rounded-border {
      background-color: pink;
      border: 3px solid green;
      background-size: 100% 100%;
      width: 200px;
      height: 200px;
      animation: animatedRadius 5s infinite;
   }
   @keyframes animatedRadius {
      50% { border-start-end-radius: 100px; }
   }
</style>
</head>
<body>
   <div class="rounded-border">
      block-start and inline-end rounded corner with animation.
   </div>
</body>
</html>

CSS border-start-end-radius: 方向 RTL

以下示例演示如何使用 border-start-end-半径和方向:rtl 属性，以从右到左的方向创建元素的圆角块开始和内联结束角 -

<html>
<head>
<style>
   .rounded-box {
      width: 150px;
      height: 150px;
      background-color: pink;
      border: 3px solid green;
      margin: 10px;
      border-start-end-radius: 120px 50px;
      direction: rtl
   }
</style>
</head>
<body>
   <div class="rounded-box">
      block-start and inline-end rounded corner using direction: rtl.
   </div>
</body>
</html>

CSS border-start-end-radius: 书写模式

我们可以将 border-start-end-radius 属性与writing-mode:vertical-lr一起使用，它从上到下、从左到右垂直排列文本。类似地，使用writing-mode:vertical-rl，它会从上到下、从右到左垂直排列文本。

这是一个示例 -

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

CSS border-start-end -radius: 垂直文本

以下示例演示如何使用 border-start-end-radius 属性创建带有垂直文本的圆角块开始和内联结束角 -

<html>
<head>
<style>
   .rounded-box {
      width: 150px;
      height: 150px;
      background-color: pink;
      border: 3px solid green;
      border-start-end-radius: 40%;
   }
   .text-box {
      writing-mode: vertical-rl;
      background-color: yellow;
      border: 3px solid blue;
      border-start-end-radius: 20%;
      padding: 5px;
   }
</style>
</head>
<body>
   <div class="rounded-box">
      <p class="text-box">block-start and inline-end rounded corner.</p>
   </div>
</body>
</html>

CSS border-start-end-radius: 相关属性

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

属性值
writing-mode设置元素的书写方向，垂直或水平。
direction集合文本方向
text-orientation设置字符的方向一行。