【CSS】盒子模型圆角边框 ( 通过设置 border-radius 样式设置圆角矩形圆角半径 )

韩曙亮

发布于 2023-03-30 19:47:27

2.2K0

发布于 2023-03-30 19:47:27

文章被收录于专栏：韩曙亮的移动开发专栏韩曙亮的移动开发专栏

文章目录

一、盒子模型圆角边框

在 CSS3 中 , 新加入了圆角边框样式 , 设置

border-radius: length;

属性 , 即可设置盒子模型的圆角边框 ;

border-radius 属性值取值 :

像素数值 : 设置一个像素值 , 如 : 50px ;
百分比数值 : 设置一个百分比数值 , 如 : 50% ;

在网页设计中 , 大量用到了圆角边框 , 如 :

购物车上的数字 : 购物车上的浮动数字 , 使用了圆角边框 ;

圆角的按钮 : 下图中头像以及下面的两个按钮 , 都是圆角边框 ;

二、代码示例

1、代码示例 - 正常矩形边框

默认情况下的边框 , 是矩形的边框 ;

代码示例 :

<!DOCTYPE html> 
<html lang="en">
<head>    
	<meta charset="UTF-8" /> 
    <title>圆角矩形</title>
	<style>
		/* 清除标签默认的内外边距 */
		* {
		   padding: 0;     
		   margin: 0;
		}
		
		/* 正常矩形样式 */
		.div1 {
			width: 200px;
			height: 200px;
			background-color: pink;
		}
	</style>
</head>
<body>
	<div class="div1">正常矩形</div>
</body>
</html>

展示效果 :

2、代码示例 - 圆形边框

如果盒子模型高度 = 宽度 , 并且圆角矩形的圆角半径为 50% 或者高度/宽度的一半 , 则该圆角矩形表现就是一个圆 ;

代码示例 :

<!DOCTYPE html> 
<html lang="en">
<head>    
	<meta charset="UTF-8" /> 
    <title>圆角矩形</title>
	<style>
		/* 清除标签默认的内外边距 */
		* {
		   padding: 0;     
		   margin: 0;
		}
		
		/* 圆角矩形样式 */
		div {
			width: 200px;
			height: 200px;
			background-color: pink;

			/* 设置圆角 下面两种设置效果相同 */
			/*border-radius: 100px;*/
			border-radius: 50%;
			
			/* 文字水平居中 */
			text-align: center;
			/* 文字垂直居中 */
			line-height: 200px;
		}
	</style>
</head>
<body>
	<div>圆角矩形</div>
</body>
</html>

展示效果 :

3、代码示例 - 圆角矩形边框

如果盒子模型高度 != 宽度 , 并且圆角矩形的圆角半径为高度的一半 , 则该圆角矩形表现就是一个正常的圆角矩形 , 左右两侧是圆角 ;

代码示例 :

<!DOCTYPE html> 
<html lang="en">
<head>    
	<meta charset="UTF-8" /> 
    <title>圆角矩形</title>
	<style>
		/* 清除标签默认的内外边距 */
		* {
		   padding: 0;     
		   margin: 0;
		}
		
		/* 圆角矩形样式 */
		div {
			width: 200px;
			height: 50px;
			background-color: pink;
			
			/* 设置圆角 */
			border-radius: 25px;
			
			/* 文字水平居中 */
			text-align: center;
			/* 文字垂直居中 */
			line-height: 50px;
		}
	</style>
</head>
<body>
	<div>圆角矩形</div>
</body>
</html>

展示效果 :

4、代码示例 - 综合对比示例

代码示例 :

<!DOCTYPE html> 
<html lang="en">
<head>    
	<meta charset="UTF-8" /> 
    <title>圆角矩形</title>
	<style>
		/* 清除标签默认的内外边距 */
		* {
		   padding: 0;     
		   margin: 0;
		}
		
		/* 正常矩形样式 */
		.div1 {
			width: 200px;
			height: 200px;
			background-color: pink;
		}
		
		/* 圆角矩形样式 */
		.div2 {
			width: 200px;
			height: 200px;
			background-color: pink;

			/* 设置圆角 下面两种设置效果相同 */
			/*border-radius: 100px;*/
			border-radius: 50%;
			
			/* 文字水平居中 */
			text-align: center;
			/* 文字垂直居中 */
			line-height: 200px;
		}
		
		/* 圆角矩形样式 */
		.div3 {
			width: 200px;
			height: 50px;
			background-color: pink;
			
			/* 设置圆角 */
			border-radius: 25px;
			
			/* 文字水平居中 */
			text-align: center;
			/* 文字垂直居中 */
			line-height: 50px;
		}
	</style>
</head>
<body>
	<div class="div1">正常矩形</div>
	<div class="div2">圆角矩形</div>
	<div class="div3">圆角矩形2</div>
</body>
</html>

展示效果 :