本文介绍了一种使用HTML和CSS来创建圆角效果的方法。通过特定的嵌套结构和CSS样式，可以为页面元素轻松添加圆角边框。这种方法不需要额外的图片资源。
1
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
2<html>
3<head>
4<title>Nifty Corners: HTML CSS rounded corners</title>
5<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
6<meta name="generator" content="HAPedit 3.1">
7
<style type="text/css">
8
body{}{padding: 20px;background-color: #FFF;
9
font: 100.01% "Trebuchet MS",Verdana,Arial,sans-serif}
10h1,h2,p{}{margin: 0 10px}
11h1{}{font-size: 250%;color: #FFF}
12h2{}{font-size: 200%;color: #f0f0f0}
13p{}{padding-bottom:1em}
14h2{}{padding-top: 0.3em}
15div#nifty{}{ margin: 0 10%;background: #9BD1FA}
16
17b.rtop, b.rbottom{}{display:block;background: #FFF}
18b.rtop b, b.rbottom b{}{display:block;height: 1px;
19overflow: hidden; background: #9BD1FA}
20b.r1{}{margin: 0 5px}
21b.r2{}{margin: 0 3px}
22b.r3{}{margin: 0 2px}
23b.rtop b.r4, b.rbottom b.r4{}{margin: 0 1px;height: 2px}
24</style>
25</head>
26<body>
27<div id="nifty">
28<b class="rtop"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b></b>
29<h1>HEADER</h1>
30<p>CONTENT - 1</p>
31<h2>HEADER</h2>
32<p>CONTENT - 2.</p>
33<b class="rbottom"><b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r1"></b></b>
34</div>
35</body>
36</html>
37
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">2
<html>3
<head>4
<title>Nifty Corners: HTML CSS rounded corners</title>5
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">6
<meta name="generator" content="HAPedit 3.1">7
<style type="text/css">8
body{}{padding: 20px;background-color: #FFF;9
font: 100.01% "Trebuchet MS",Verdana,Arial,sans-serif}10
h1,h2,p{}{margin: 0 10px}11
h1{}{font-size: 250%;color: #FFF}12
h2{}{font-size: 200%;color: #f0f0f0}13
p{}{padding-bottom:1em}14
h2{}{padding-top: 0.3em}15
div#nifty{}{ margin: 0 10%;background: #9BD1FA}16
17
b.rtop, b.rbottom{}{display:block;background: #FFF}18
b.rtop b, b.rbottom b{}{display:block;height: 1px;19
overflow: hidden; background: #9BD1FA}20
b.r1{}{margin: 0 5px}21
b.r2{}{margin: 0 3px}22
b.r3{}{margin: 0 2px}23
b.rtop b.r4, b.rbottom b.r4{}{margin: 0 1px;height: 2px}24
</style>25
</head>26
<body>27
<div id="nifty">28
<b class="rtop"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b></b>29
<h1>HEADER</h1>30
<p>CONTENT - 1</p>31
<h2>HEADER</h2>32
<p>CONTENT - 2.</p>33
<b class="rbottom"><b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r1"></b></b>34
</div>35
</body>36
</html>37
扫一扫
1037
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
