CSS - border-bottom-right-radius 属性_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 边框右下半径 - 长度值

下面是一个如何使用长度值创建右下角圆角的示例 -

<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>

CSS 边框右下半径 - 百分比值

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

<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>

CSS 边框右下角半径 - 动画

下面是一个示例，说明如何创建带有动画的右下角圆角 -

<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>

CSS 边框右下半径 - 不同的形状

您可以使用 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>

CSS 边框右下半径 - 图像

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

这是一个例子 -

<html>
<head>
<style>
	 	.img-border-radius {
	 	 	 background-image: url(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>

<< CSS - page-break-inside 属性 CSS - border-bottom-style 属性 >>