CSS - border-radius 属性

上一页
下一页

CSS 的 border-radius 属性用于使元素的外边界角变圆。

要使角呈圆形，请添加一个半径值，要使其呈椭圆形，请添加两个半径值。

border-radius 属性将应用于整个背景，即使未指定边框也是如此

当 border-collapse 属性设置为 collapse 时，border-radius 属性不会应用于表元素。

border-radius 属性是以下 CSS 属性的简写：

  • border-top-left-radius：对元素的左上角进行四舍五入。
  • border-top-right-radius：对元素的右上角进行四舍五入。
  • border-bottom-right-radius：对元素的右下角进行倒圆角。
  • border-bottom-left-radius：对元素的左下角进行四舍五入。

可能的值

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

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

  • 水平轴百分比是指盒子的宽度。
  • 垂直轴百分比是指盒子的高度。
  • 负值无效。

border-radius 属性可以具有上述值，如下所示：

  • 一个、两个、三个或四个值作为 <length> 或<percentage> - 用于设置角的单个半径。
  • 后跟“/”和一个、两个、三个或四个值，如<length> 或<percentage> - 用于设置椭圆角。

下面给出的表格显示了传递的值及其含义：

值 描述
radius

表示边界的半径。单值语法。
top-left-and-bottom-right

表示边框的左上角和右下角的半径。双值语法。
top-right-and-bottom-left

表示边框的右上角和左下角的半径。双值和三值语法。
top-left

表示边框左上角的半径。三值和四值语法。
top-right

表示边框右上角的半径。四值语法。
bottom-right

表示边框右下角的半径。三值和四值语法。
bottom-left

表示边框左下角的半径。四值语法。

适用于

除未替换的内联元素、表格行和行组之外的所有 HTML 元素。

DOM 语法


object.style.borderRadius = "20px | 20px 20px | 5% 15px"; 例

下面是一个示例：


<html>
<style>
	 	div.box {
	 	 	 height: 50px;
	 	 	 width: 50px;
	 	 	 display: inline-block;
	 	 	 padding: 5px;
	 	 	 border: 1px solid black;
	 	}
	 	#m {
	 	 	 border-radius: 20px;
	 	 	 background-color: aqua;
	 	}
	 	#n {
	 	 	 border-radius: 5% 30px;
	 	 	 background-color: salmon;
	 	}
	 	#o {
	 	 	 border-radius: 15px 20px 30px;
	 	 	 background-color: yellow;
	 	}
	 	#p {
	 	 	 border-radius: 20px 3% 20px 5%;
	 	 	 background-color: blue;
	 	}
</style>
<head>
</head>
<body>
	 	<div id="m" class="box"></div>
	 	<div id="n" class="box"></div>
	 	<div id="o" class="box"></div>
	 	<div id="p" class="box"></div>
</body>
</html>

 

打印本页
上一页
下一页