CSS 属性

CSS border-end-start-radius 属性定义元素的 block-end 和 inline-start 边之间的角半径。

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

属性值

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

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

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

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

    • 负值无效。

适用

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

DOM 语法

object.style.borderEndStartRadius = "length";

CSS border-end-start-radius: 长度值

以下是如何创建块的示例 -使用长度值的结束和内联开始圆角 -

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

CSS border-end-start-radius: 百分比值

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

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

CSS border-end-start-radius: 动画

这里是如何使用动画创建块结束和内联开始圆角的示例 -

<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-end-start-radius: 100px; }
   }
</style>
</head>
<body>
   <div class="rounded-border">
      block-end and inline-start rounded corner with animation.
   </div>
</body>
</html>

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

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

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

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

我们可以使用 border-end-start-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-end-start-radius: 30%;
      writing-mode: vertical-lr;
   }
   .top-left-rl {
      border-end-start-radius: 30%;
      writing-mode: vertical-rl;
   }
</style>
</head>
<body>
   <div class="rounded-box top-left-lr">
      block-end and inline-start rounded corner using vertical-lr.
   </div>
   <div class="rounded-box top-left-rl">
   block-end and inline-start rounded corner using vertical-rl.
   </div>
</body>
</html>

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

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

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

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

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

属性value
writing-mode设置书写方向垂直和水平方向的元素。
direction设置text
text-orientation设置一行中字符的方向。