无图片取得圆角效果
CSS
Code
1body, table
2{}{
3 font-size: 100%;
4 box-sizing: border-box;
5 -moz-box-sizing: border-box;
6}
7body, form, input, table, td, button
8{}{
9 font-family: Verdana, Arial, Helvetica, sans-serif;
10}
11
12
13/**//* START rounded corners */
14.topCorners, .bottomCorners
15{}{
16 display: block;
17 height: 5px;
18 overflow: hidden;
19 padding: 0;
20}
21.topCorners *, .bottomCorners *
22{}{
23 display: block;
24 height: 1px;
25 overflow: hidden;
26 padding: 0;
27 line-height: 1px;
28 font-size: 1px;
29}
30.l1
31{}{
32 margin: 0 5px;
33}
34.l2
35{}{
36 margin: 0 3px;
37}
38.l3
39{}{
40 margin: 0 2px;
41}
42.l4
43{}{
44 margin: 0 1px;
45 height: 2px;
46}
47/**//* zoom:1; is to force IE to have "layout" for this element so the bottom corners that follow it don't go funny */
48.styledPanel
49{}{
50 zoom: 1;
51}
52/**//* END rounded corners */
53
54/**//* START Personalization */
55#recommended
56{}{
57 clear: both;
58 margin: 1.32em 0 auto -10px;
59}
60
61ol
62{}{
63 font: italic 1em Georgia, Times, serif;
64 color: #999999;
65}
66ol p
67{}{
68 font: normal .8em Arial, Helvetica, sans-serif;
69 color: #000000;
70}
71#recommended .styledPanel
72{}{
73 padding: 0 10px;
74 background: #EBF2FA;
75}
76#recommended .styledPanel h4
77{}{
78 background: #7FB6CB;
79 border-bottom: solid 1px #999999;
80 margin: 0 -10px 8px;
81 padding: 0 10px 5px 10px;
82}
83#recommended .styledPanel
84{}{
85 padding-bottom: 6px;
86}
87#recommended h4 a
88{}{
89 font-size: .85em;
90 font-weight: normal;
91}
92#recommended .l2
93{}{
94 border-left: solid 2px #999999;
95 border-right: solid 2px #999999;
96}
97#recommended .l3, #recommended .l4, #recommended .styledPanel
98{}{
99 border-left: solid 1px #999999;
100 border-right: solid 1px #999999;
101}
102#recommended .l1
103{}{
104 background: #999999;
105}
106#recommended .topCorners .l2, #recommended .topCorners .l3, #recommended .topCorners .l4
107{}{
108 background: #7FB6CB;
109}
110#recommended .bottomCorners .l2, #recommended .bottomCorners .l3, #recommended .bottomCorners .l4
111{}{
112 background: #EBF2FA;
113}
1body, table
2{}{
3 font-size: 100%;
4 box-sizing: border-box;
5 -moz-box-sizing: border-box;
6}
7body, form, input, table, td, button
8{}{
9 font-family: Verdana, Arial, Helvetica, sans-serif;
10}
11
12
13/**//* START rounded corners */
14.topCorners, .bottomCorners
15{}{
16 display: block;
17 height: 5px;
18 overflow: hidden;
19 padding: 0;
20}
21.topCorners *, .bottomCorners *
22{}{
23 display: block;
24 height: 1px;
25 overflow: hidden;
26 padding: 0;
27 line-height: 1px;
28 font-size: 1px;
29}
30.l1
31{}{
32 margin: 0 5px;
33}
34.l2
35{}{
36 margin: 0 3px;
37}
38.l3
39{}{
40 margin: 0 2px;
41}
42.l4
43{}{
44 margin: 0 1px;
45 height: 2px;
46}
47/**//* zoom:1; is to force IE to have "layout" for this element so the bottom corners that follow it don't go funny */
48.styledPanel
49{}{
50 zoom: 1;
51}
52/**//* END rounded corners */
53
54/**//* START Personalization */
55#recommended
56{}{
57 clear: both;
58 margin: 1.32em 0 auto -10px;
59}
60
61ol
62{}{
63 font: italic 1em Georgia, Times, serif;
64 color: #999999;
65}
66ol p
67{}{
68 font: normal .8em Arial, Helvetica, sans-serif;
69 color: #000000;
70}
71#recommended .styledPanel
72{}{
73 padding: 0 10px;
74 background: #EBF2FA;
75}
76#recommended .styledPanel h4
77{}{
78 background: #7FB6CB;
79 border-bottom: solid 1px #999999;
80 margin: 0 -10px 8px;
81 padding: 0 10px 5px 10px;
82}
83#recommended .styledPanel
84{}{
85 padding-bottom: 6px;
86}
87#recommended h4 a
88{}{
89 font-size: .85em;
90 font-weight: normal;
91}
92#recommended .l2
93{}{
94 border-left: solid 2px #999999;
95 border-right: solid 2px #999999;
96}
97#recommended .l3, #recommended .l4, #recommended .styledPanel
98{}{
99 border-left: solid 1px #999999;
100 border-right: solid 1px #999999;
101}
102#recommended .l1
103{}{
104 background: #999999;
105}
106#recommended .topCorners .l2, #recommended .topCorners .l3, #recommended .topCorners .l4
107{}{
108 background: #7FB6CB;
109}
110#recommended .bottomCorners .l2, #recommended .bottomCorners .l3, #recommended .bottomCorners .l4
111{}{
112 background: #EBF2FA;
113}
HTML
Code
1<div id="recommended">
2 <div class="topCorners">
3 <div class="l1">
4 </div>
5 <div class="l2">
6 </div>
7 <div class="l3">
8 </div>
9 <div class="l4">
10 </div>
11 </div>
12 <div class="styledPanel">
13 <h4>
14 Recommended Downloads | <a href="#" title="We are recommending collections of downloads that might interest you based on what you have viewed in the Download Center.">
15 What's this?</a></h4>
16 <ol>
17 <li><a href="#">
18 Microsoft Internet Explorer 6.0</a></li>
19 <li><a href="#">
20 Microsoft ASP.NET</a></li>
21 <li><a href="#">
22 Microsoft .NET Framework</a></li>
23 <li><a href="#">
24 Microsoft .NET</a></li>
25 </ol>
26 </div>
27 <div class="bottomCorners">
28 <div class="l4">
29 </div>
30 <div class="l3">
31 </div>
32 <div class="l2">
33 </div>
34 <div class="l1">
35 </div>
36 </div>
37 </div>
1<div id="recommended">
2 <div class="topCorners">
3 <div class="l1">
4 </div>
5 <div class="l2">
6 </div>
7 <div class="l3">
8 </div>
9 <div class="l4">
10 </div>
11 </div>
12 <div class="styledPanel">
13 <h4>
14 Recommended Downloads | <a href="#" title="We are recommending collections of downloads that might interest you based on what you have viewed in the Download Center.">
15 What's this?</a></h4>
16 <ol>
17 <li><a href="#">
18 Microsoft Internet Explorer 6.0</a></li>
19 <li><a href="#">
20 Microsoft ASP.NET</a></li>
21 <li><a href="#">
22 Microsoft .NET Framework</a></li>
23 <li><a href="#">
24 Microsoft .NET</a></li>
25 </ol>
26 </div>
27 <div class="bottomCorners">
28 <div class="l4">
29 </div>
30 <div class="l3">
31 </div>
32 <div class="l2">
33 </div>
34 <div class="l1">
35 </div>
36 </div>
37 </div>
效果