在 html 页面中，圆角边框有很多应用，如可以将块、图片、按钮设置为圆角边框，使其得到一定程度的美化。边框的圆角化一般可以用 css 中的属性“border-radius”来设置，该属性值表示圆角半径大小，如果设定一个值，这时边框的四个顶角就会变成相同的圆角。也可同时设定四个值，这四个值分别对应边框的左上角、右上角、右下角和左下角，此时可以使这四个角的弯曲程度不同。
# 基本思路
将块设置为圆角边框样式。
将按钮设置为圆角边框样式。
# 代码实现
# 1.将块设置为圆角边框
下例代码中，我们可以先使用 *{margin: 0px;padding: 0;}将浏览器的默认样式消除。然后我们来设置 id 为 show 的块的 border-radius 属性值。我们将其设置为 30px 20px 20px 30px 四个值，表示左上角和左下角的圆角的半径为 30px,而右上角和右下角的圆角的半径为 20px。设置其背景颜色为蓝色，字体颜色为白色。
# index.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>块的圆角边框</title>
<style type="text/css">
* {
margin: 0px;
padding: 0;
}
body {
width: 100%;
text-align: center;
font: normal 100% Helvetia, Arial, sans-serif;
}
#show {
width: 80%;
height: fit-content;
background-color: blue;
border-radius: 30px 20px 20px 30px;
margin: 10%;
padding: 10%;
color: white;
}
</style>
</head>
<body>
<div id="show">
这里是展示页面。
</div>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
# 2.设置按钮的圆角边框样式
我们可以先写一个表单，添加一个提交按钮。设置该按钮的宽度为 300px，高度为 50px，设置它边界的宽度为 0，圆角边框的半径为 30px，背景颜色为蓝色。我们还可设置按钮的轮廓线即 outline 为 none,表示不显示其轮廓线。然后将字体颜色设置为白色。
# index1.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>按钮的圆角边框</title>
<style type="text/css">
* {
margin: 0px;
padding: 0;
}
body {
width: 100%;
text-align: center;
font: normal 100% Helvetia, Arial, sans-serif;
}
#submit {
width: 300px;
height: 50px;
background: blue;
border-width: 0px;
border-radius: 20px;
outline: none;
color: white;
,padding: 5%;
margin: 12%;
}
</style>
</head>
<body>
<div id="print">
<form action="" method="post">
<input type="submit" value="提交" id="submit" />
</form>
</div>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
# 学习收获
圆角边框的合理使用，可以将页面进行一定程度上的美化，注意设置 border-radius 的四个值时，其分别对应的是哪四个角。我们以后设计网页时，便可将图片、块和按钮等设置为圆角边框样式。