CSS3 border-top-right-radius 属性
CSS3 border-top-right-radius 属性
概述
在CSS3中，border-top-right-radius 属性被用来设置元素边框右上角的圆角。
语法
border-top-right-radius: length|percentage [length|percentage]?
属性值
- length：用长度值来定义圆角半径。例如：px、pt、cm等。
- percentage：用百分比来定义圆角半径。
注：border-top-right-radius 属性设置一个值时，则右上角的水平和垂直半径值相等。如果设置两个值，则第一个用于水平半径，第二个用于垂直半径。如果第二个值被省略，则垂直半径默认与水平半径相等。
图示解释
以下是一个用 border-top-right-radius 属性设置元素样式的示例：
<!DOCTYPE html>
<html>
<head>
<title>border-top-right-radius Example</title>
<style>
div {
display: inline-block;
width: 100px;
height: 100px;
border: 2px solid black;
background-color: yellow;
border-top-right-radius: 30px 60px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
结果：
在这个示例中，我们定义了一个 div 元素，并使用 border-top-right-radius 属性对其进行圆角设置。我们使用了两个值，分别是30px和60px。这使得 div 元素的右上角具有比其他角落更椭圆的圆角。
浏览器兼容
border-top-right-radius属性在现代浏览器中被广泛支持，包括Chrome，Firefox，Safari，Opera和Edge。但是，仍然可能存在某些不支持的浏览器版本，尤其是一些旧的Internet Explorer版本。
总结
通过使用CSS3的border-top-right-radius属性，我们可以很容易地为元素设置圆角。我们可以使用像素或百分比来设置圆角的半径，以满足我们需要的元素样式。这使得我们可以使我们的网页以更有吸引力的方式展现。