CSS 属性

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

属性值

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

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

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

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

    • 负值无效。

适用

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

DOM 语法

object.style.borderTopRightRadius = "length"; 

如果设置 border-top-right-radius 属性，然后设置 border-radius 简写属性，则 border- top-right-radius 属性将重置为其默认值。

CSS border-top-right-radius 值

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

<html>
<head>
<style>
   .rounded-border {
      background-color: pink;
      border: 3px solid green;
      border-top-right-radius: 50px;
      background-size: 100% 100%;
      width: 200px;
      height: 200px;
   }
</style>
</head>
<body>
   <div class="rounded-border">
      top-right rounded corner box.
   </div>
</body>
</html>

CSS border-top-right-radius 百分比

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

<html>
<head>
<style>
   .rounded-border {
      background-color: pink;
      border: 3px solid green;
      border-top-right-radius: 25%;
      background-size: 100% 100%;
      width: 200px;
      height: 200px;
   }
</style>
</head>
<body>
   <div class="rounded-border">
      top-right rounded corner box.
   </div>
</body>
</html>

CSS border-top-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-top-right-radius: 100px; }
   }
</style>
</head>
<body>
   <div class="rounded-border">
      带动画的右上角圆角。
   </div>
</body>
</html>

CSS border-top-right-radius  形状

您可以使用 border-top-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-top-right-radius: 35px;
   }
   .rounded-box.ellipse-arc {
      border-top-right-radius: 75px 35px;
   }
   .rounded-box.square-per {
      border-top-right-radius: 30%;
   }
   .non-square-per {
      border-top-right-radius: 30%;
      width: 200px;
      height: 100px;
      background-color: pink;
      border: 3px solid green;
      margin: 10px;
   }
</style>
</head>
<body>
   <h3>使用 border-top-right-radius 属性的不同形状</h3>
   <div class="rounded-box circle-arc">
      圆弧
   </div>
   <div class="rounded-box ellipse-arc">
      椭圆弧
   </div>
   <div class="rounded-box square-per">
      具有 % 半径的方形元素
   </div>
   <div class="non-square-per">
     具有 % 半径的非方形元素。
   </div>
</body>
</html>

CSS border-top-right-radius 图片

您可以在图像的右上角添加圆角边框使用 border-top-right-radius 属性。

这是一个示例 -

<html>
<head>
<style>
   .img-border-radius {
      background-image: url(/css/images/tree.jpg);
      border-top-right-radius: 6em;
      background-size: 100% 100%;
      width: 200px;
      height: 200px;
   }
</style>
</head>
<body>
   <div class="img-border-radius">
      右上角圆角图像。
   </div>
</body>
</html>