CSS 属性

CSS border-bottom-right-radius 属性控制元素边框右下角的圆度。

属性值

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

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

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

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

    • 负值无效。

适用

所有 HTML 元素。

DOM 语法

object.style.borderBottomRightRadius = "length";
    如果直接在元素上设置 border-bottom-right-radius 属性，然后设置如果在同一元素上使用 border-radius 属性而不设置 border-bottom-right-radius 属性，则 border-bottom-right-radius 属性将重置为其初始值。

    CSS border-bottom-right-radius- 长度值

    这里是如何使用长度值创建右下圆角的示例 -

    <html>
<head>
<style>
   .rounded-border {
      background-color: pink;
      border: 3px solid green;
      border-bottom-right-radius: 50px;
      background-size: 100% 100%;
      width: 200px;
      height: 200px;
   }
</style>
</head>
<body>
   <div class="rounded-border">
      bottom-right 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-bottom-right-radius: 百分比值

    这里是如何使用百分比值创建右下圆角的示例 -

    <html>
<head>
<style>
   .rounded-border {
      background-color: pink;
      border: 3px solid green;
      border-bottom-right-radius: 25%;
      background-size: 100% 100%;
      width: 200px;
      height: 200px;
   }
</style>
</head>
<body>
   <div class="rounded-border">
      bottom-right 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-bottom-right-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-bottom-right-radius: 100px; }
   }
</style>
</head>
<body>
   <div class="rounded-border">
      bottom-right 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-bottom-right-radius: 不同形状

    您可以使用在元素的右下角创建不同的形状 border-bottom-right-radius 属性。

    这是一个示例 -

    <html>
<head>
<style>
   .rounded-box {
      width: 150px;
      height: 150px;
      background-color: pink;
      border: 3px solid green;
      margin: 10px;
   }
   .rounded-box.circle-arc {
      border-bottom-right-radius: 35px;
   }
   .rounded-box.ellipse-arc {
      border-bottom-right-radius: 75px 35px;
   }
   .rounded-box.square-per {
      border-bottom-right-radius: 30%;
   }
   .non-square-per {
      border-bottom-right-radius: 30%;
      width: 200px;
      height: 100px;
      background-color: pink;
      border: 3px solid green;
      margin: 10px;
   }
</style>
</head>
<body>
   <h3>Different shapes using border-bottom-right-radius pproperty</h3>
   <div class="rounded-box circle-arc">
      Arc of an circle.
   </div>
   <div class="rounded-box ellipse-arc">
      Arc of an ellipse.
   </div>
   <div class="rounded-box square-per">
      Square element with % radius.
   </div>
   <div class="non-square-per">
      Non-square element with % radius.
   </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
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44

    CSS border-bottom-right-radius: 图像

    您可以在顶部添加圆角边框 -使用 border-bottom-right-radius 属性设置图像的右角。

    这是一个示例 -

    <html>
<head>
<style>
   .img-border-radius {
      background-image: url(/css/images/tree.jpg);
      border-bottom-right-radius: 6em;
      background-size: 100% 100%;
      width: 200px;
      height: 200px;
   }
</style>
</head>
<body>
   <div class="img-border-radius">
      bottom-right rounded corner image.
   </div>
</body>
</html> 
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17