文章目录
- 一、盒子模型圆角边框
- 二、代码示例
- 1、代码示例 - 正常矩形边框
- 2、代码示例 - 圆形边框
- 3、代码示例 - 圆角矩形边框
- 4、代码示例 - 综合对比示例
一、盒子模型圆角边框
在 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>
展示效果 :
