CSS 属性

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

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

属性值

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

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

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

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

    • 负值无效。

适用

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

DOM 语法

object.style.borderStartStartRadius = "length";

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

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

    <html>
<head>
<style>
   .rounded-box {
      width: 150px;
      height: 150px;
      background-color: pink;
      border: 3px solid green;
      margin: 10px;
      border-start-start-radius: 60px 60px;
   }
</style>
</head>
<body>
   <div class="rounded-box">
      block-start and inline-start rounded corner.
   </div>
</body>
</html> 
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18

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

    这里是如何创建的示例使用百分比值的 block-start 和 inline-start 圆角 -

    <html>
<head>
<style>
   .rounded-box {
      width: 150px;
      height: 150px;
      background-color: pink;
      border: 3px solid green;
      margin: 10px;
      border-start-start-radius: 30% 30%;
   }
</style>
</head>
<body>
   <div class="rounded-box">
      block-start and inline-start rounded corner.
   </div>
</body>
</html> 
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18

    CSS border-start-start-radius:  动画

    这里是如何创建 block-start 的示例和带动画的 inline-start 圆角 -

    <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-start-radius: 100px; }
   }
</style>
</head>
<body>
   <div class="rounded-border">
      block-start and inline-start rounded corner with animation.
   </div>
</body>
</html> 
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21

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

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

    <html>
<head>
<style>
   .rounded-box {
      width: 150px;
      height: 150px;
      background-color: pink;
      border: 3px solid green;
      margin: 10px;
      border-start-start-radius: 120px 50px;
      direction: rtl
   }
</style>
</head>
<body>
   <div class="rounded-box">
      block-start and inline-start rounded corner using direction: rtl.
   </div>
</body>
</html> 
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19

    CSS border-start-start-radius: writing-mode

    我们可以将 border-start-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-start-start-radius: 30%;
      writing-mode: vertical-lr;
   }
   .top-left-rl {
      border-start-start-radius: 30%;
      writing-mode: vertical-rl;
   }
</style>
</head>
<body>
   <div class="rounded-box top-left-lr">
      block-start and inline-start rounded corner using vertical-lr.
   </div>
   <div class="rounded-box top-left-rl">
      block-start and inline-start rounded corner using vertical-rl.
   </div>
</body>
</html> 
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28

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

    以下示例演示如何使用 border-start-start-radius 属性为具有垂直文本的元素创建圆角块起始角和内联起始角 -

    <html>
<head>
<style>
   .rounded-box {
      width: 150px;
      height: 150px;
      background-color: pink;
      border: 3px solid green;
      border-start-start-radius: 60%;
   }
   .text-box {
      writing-mode: vertical-rl;
      background-color: yellow;
      border: 3px solid blue;
      border-start-start-radius: 20%;
      padding: 5px;
   }
</style>
</head>
<body>
   <div class="rounded-box">
      <p class="text-box">block-start and inline-start rounded corner.</p>
   </div>
</body>
</html> 
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24

    CSS border-start-start-radiuss: 相关属性

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

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