用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}
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![](/Images/OutliningIndicators/InBlock.gif)
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![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
2
![](/Images/OutliningIndicators/None.gif)
3
![](/Images/OutliningIndicators/None.gif)
4
![](/Images/OutliningIndicators/None.gif)
5
![](/Images/OutliningIndicators/None.gif)
6
![](/Images/OutliningIndicators/None.gif)
7
![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
8
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
9
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
10
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
11
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
12
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
13
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
14
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
15
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
16
![](/Images/OutliningIndicators/InBlock.gif)
17
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
18
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
19
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
20
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
21
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
22
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
23
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
24
![](/Images/OutliningIndicators/None.gif)
25
![](/Images/OutliningIndicators/None.gif)
26
![](/Images/OutliningIndicators/None.gif)
27
![](/Images/OutliningIndicators/None.gif)
28
![](/Images/OutliningIndicators/None.gif)
29
![](/Images/OutliningIndicators/None.gif)
30
![](/Images/OutliningIndicators/None.gif)
31
![](/Images/OutliningIndicators/None.gif)
32
![](/Images/OutliningIndicators/None.gif)
33
![](/Images/OutliningIndicators/None.gif)
34
![](/Images/OutliningIndicators/None.gif)
35
![](/Images/OutliningIndicators/None.gif)
36
![](/Images/OutliningIndicators/None.gif)
37
![](/Images/OutliningIndicators/None.gif)