<HTML>
<HEAD>
<style>
.spiffy { display : block }
.spiffy * {
display : block ;
height : 1px ;
overflow : hidden ;
font-size : .01em ;
background : #b20000 }
.spiffy1 {
margin-left : 3px ;
margin-right : 3px ;
padding-left : 1px ;
padding-right : 1px ;
border-left : 1px solid #870000 ;
border-right : 1px solid #870000 ;
background : #9f0000 }
.spiffy2 {
margin-left : 1px ;
margin-right : 1px ;
padding-right : 1px ;
padding-left : 1px ;
border-left : 1px solid #6f0000 ;
border-right : 1px solid #6f0000 ;
background : #a30000 }
.spiffy3 {
margin-left : 1px ;
margin-right : 1px ;
border-left : 1px solid #a30000 ;
border-right : 1px solid #a30000 ; }
.spiffy4 {
border-left : 1px solid #870000 ;
border-right : 1px solid #870000 }
.spiffy5 {
border-left : 1px solid #9f0000 ;
border-right : 1px solid #9f0000 }
.spiffyfg {
background : #b20000 }
</style>
</head>
<body>
<div style="height:200px;width:700px">
<b class="spiffy">
<b class="spiffy1"><b></b></b>
<b class="spiffy2"><b></b></b>
<b class="spiffy3"></b>
<b class="spiffy4"></b>
<b class="spiffy5"></b></b>
<div class="spiffyfg">
大家好,我是新的圆角哦,看到了没有,很高兴!
</div>
<b class="spiffy">
<b class="spiffy5"></b>
<b class="spiffy4"></b>
<b class="spiffy3"></b>
<b class="spiffy2"><b></b></b>
<b class="spiffy1"><b></b></b></b>
</div>
</body>
</html>
圆角2
<HEAD>
<style>
.spiffy { display : block }
.spiffy * {
display : block ;
height : 1px ;
overflow : hidden ;
font-size : .01em ;
background : #b20000 }
.spiffy1 {
margin-left : 3px ;
margin-right : 3px ;
padding-left : 1px ;
padding-right : 1px ;
border-left : 1px solid #870000 ;
border-right : 1px solid #870000 ;
background : #9f0000 }
.spiffy2 {
margin-left : 1px ;
margin-right : 1px ;
padding-right : 1px ;
padding-left : 1px ;
border-left : 1px solid #6f0000 ;
border-right : 1px solid #6f0000 ;
background : #a30000 }
.spiffy3 {
margin-left : 1px ;
margin-right : 1px ;
border-left : 1px solid #a30000 ;
border-right : 1px solid #a30000 ; }
.spiffy4 {
border-left : 1px solid #870000 ;
border-right : 1px solid #870000 }
.spiffy5 {
border-left : 1px solid #9f0000 ;
border-right : 1px solid #9f0000 }
.spiffyfg {
background : #b20000 }
</style>
</head>
<body>
<div style="height:200px;width:700px">
<b class="spiffy">
<b class="spiffy1"><b></b></b>
<b class="spiffy2"><b></b></b>
<b class="spiffy3"></b>
<b class="spiffy4"></b>
<b class="spiffy5"></b></b>
<div class="spiffyfg">
大家好,我是新的圆角哦,看到了没有,很高兴!
</div>
<b class="spiffy">
<b class="spiffy5"></b>
<b class="spiffy4"></b>
<b class="spiffy3"></b>
<b class="spiffy2"><b></b></b>
<b class="spiffy1"><b></b></b></b>
</div>
</body>
</html>
1
<HTML>
2 <HEAD>
3 <style>
4
5 .pillar {
6 background : transparent ;
7 width : 40% ;
8 }
9 .pillar h1, .pillar p {
10 margin : 0 10px ;
11 }
12 .pillar h1 {
13 font-size : 2em ;
14 color : #fff ;
15 }
16 .pillar p {
17 padding-bottom : 0.5em ;
18 }
19 .pillar .b1, .pillar .b2, .pillar .b3, .pillar .b4 {
20 display : block ;
21 overflow : hidden ;
22 font-size : 1px ;
23 }
24 .pillar .b1, .pillar .b2, .pillar .b4 {
25 height : 1px ;
26 }
27 .pillar .b2, .pillar .b3 {
28 background : #d66 ;
29 border-left : 1px solid #fff ;
30 border-right : 1px solid #fff ;
31 }
32 .pillar .b4 {
33 background : #d66 ;
34 border-left : 4px solid #fff ;
35 border-right : 4px solid #fff ;
36 }
37 .pillar .b1 {
38 margin : 0 2px ;
39 background : #fff ;
40 }
41 .pillar .b2 {
42 margin : 0 1px ;
43 border-width : 0 1px ;
44 }
45 .pillar .b3 {
46 height : 2px ;
47 margin : 0 ;
48 }
49 .pillar .b4 {
50 margin : 0 2px ;
51 }
52 .pillar .boxcontent {
53 display : block ;
54 background : #d66 ;
55 border-left : 1px solid #fff ;
56 border-right : 1px solid #fff ;
57 margin : 0 5px ;
58 }
59
60 </style>
61 </head>
62 <body>
63
64
65 <div class="pillar">
66 <b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b2"></b><b class="b4"></b>
67 <div class="boxcontent">
68 <h1>特殊css圆角矩形</h1>
69 </div>
70 <b class="b4"></b><b class="b2"></b><b class="b3"></b><b class="b2"></b><b class="b1"></b>
71 </div>
72 </body>
73 </html>
74
75
圆角3
2 <HEAD>
3 <style>
4
5 .pillar {
6 background : transparent ;
7 width : 40% ;
8 }
9 .pillar h1, .pillar p {
10 margin : 0 10px ;
11 }
12 .pillar h1 {
13 font-size : 2em ;
14 color : #fff ;
15 }
16 .pillar p {
17 padding-bottom : 0.5em ;
18 }
19 .pillar .b1, .pillar .b2, .pillar .b3, .pillar .b4 {
20 display : block ;
21 overflow : hidden ;
22 font-size : 1px ;
23 }
24 .pillar .b1, .pillar .b2, .pillar .b4 {
25 height : 1px ;
26 }
27 .pillar .b2, .pillar .b3 {
28 background : #d66 ;
29 border-left : 1px solid #fff ;
30 border-right : 1px solid #fff ;
31 }
32 .pillar .b4 {
33 background : #d66 ;
34 border-left : 4px solid #fff ;
35 border-right : 4px solid #fff ;
36 }
37 .pillar .b1 {
38 margin : 0 2px ;
39 background : #fff ;
40 }
41 .pillar .b2 {
42 margin : 0 1px ;
43 border-width : 0 1px ;
44 }
45 .pillar .b3 {
46 height : 2px ;
47 margin : 0 ;
48 }
49 .pillar .b4 {
50 margin : 0 2px ;
51 }
52 .pillar .boxcontent {
53 display : block ;
54 background : #d66 ;
55 border-left : 1px solid #fff ;
56 border-right : 1px solid #fff ;
57 margin : 0 5px ;
58 }
59
60 </style>
61 </head>
62 <body>
63
64
65 <div class="pillar">
66 <b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b2"></b><b class="b4"></b>
67 <div class="boxcontent">
68 <h1>特殊css圆角矩形</h1>
69 </div>
70 <b class="b4"></b><b class="b2"></b><b class="b3"></b><b class="b2"></b><b class="b1"></b>
71 </div>
72 </body>
73 </html>
74
75
1
<HTML>
2 <HEAD>
3 <style>
4
5 .serif {
6 background : transparent ; width : 40% ;
7 }
8 .serif h1, .serif p {
9 margin : 0 10px ;
10 }
11 .serif h1 {
12 font-size : 2em ; color : #fff ;
13 }
14 .serif p {
15 padding-bottom : 0.5em ;
16 }
17 .serif .b1, .serif .b2, .serif .b3, .serif .b4 {
18 display : block ;
19 overflow : hidden ;
20 font-size : 1px ;
21 }
22 .serif .b1, .serif .b2, .serif .b3 {
23 height : 1px ;
24 }
25 .serif .b2, .serif .b3 {
26 background : #fc0 ;
27 border-left : 1px solid #fff ;
28 border-right : 1px solid #fff ;
29 }
30 .serif .b4 {
31 background : #fc0 ;
32 border-left : 1px solid #fff ;
33 border-right : 1px solid #fff ;
34 }
35 .serif .b1 {
36 margin : 0 ; background : #fff ;
37 }
38 .serif .b2 {
39 margin : 0 1px ;
40 border-width : 0 2px ;
41 }
42 .serif .b3 {
43 margin : 0 3px ;
44 }
45 .serif .b4 {
46 height : 2px ;
47 margin : 0 4px ;
48 }
49 .serif .boxcontent {
50 display : block ;
51 background : #fc0 ;
52 border-left : 1px solid #fff ;
53 border-right : 1px solid #fff ;
54 margin : 0 5px ;
55 }
56
57
58 </style>
59 </head>
60 <body>
61
62 <div class="serif">
63 <b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b>
64 <div class="boxcontent">
65 <h1>反向css圆角矩形</h1>
66 </div>
67 <b class="b4"></b><b class="b3"></b><b class="b2"></b><b class="b1"></b>
68 </div>
69
70
71
72 </body>
73 </html>
74
75
圆角4
2 <HEAD>
3 <style>
4
5 .serif {
6 background : transparent ; width : 40% ;
7 }
8 .serif h1, .serif p {
9 margin : 0 10px ;
10 }
11 .serif h1 {
12 font-size : 2em ; color : #fff ;
13 }
14 .serif p {
15 padding-bottom : 0.5em ;
16 }
17 .serif .b1, .serif .b2, .serif .b3, .serif .b4 {
18 display : block ;
19 overflow : hidden ;
20 font-size : 1px ;
21 }
22 .serif .b1, .serif .b2, .serif .b3 {
23 height : 1px ;
24 }
25 .serif .b2, .serif .b3 {
26 background : #fc0 ;
27 border-left : 1px solid #fff ;
28 border-right : 1px solid #fff ;
29 }
30 .serif .b4 {
31 background : #fc0 ;
32 border-left : 1px solid #fff ;
33 border-right : 1px solid #fff ;
34 }
35 .serif .b1 {
36 margin : 0 ; background : #fff ;
37 }
38 .serif .b2 {
39 margin : 0 1px ;
40 border-width : 0 2px ;
41 }
42 .serif .b3 {
43 margin : 0 3px ;
44 }
45 .serif .b4 {
46 height : 2px ;
47 margin : 0 4px ;
48 }
49 .serif .boxcontent {
50 display : block ;
51 background : #fc0 ;
52 border-left : 1px solid #fff ;
53 border-right : 1px solid #fff ;
54 margin : 0 5px ;
55 }
56
57
58 </style>
59 </head>
60 <body>
61
62 <div class="serif">
63 <b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b>
64 <div class="boxcontent">
65 <h1>反向css圆角矩形</h1>
66 </div>
67 <b class="b4"></b><b class="b3"></b><b class="b2"></b><b class="b1"></b>
68 </div>
69
70
71
72 </body>
73 </html>
74
75
1
<HTML>
2 <HEAD>
3 <style>
4
5 .raised { background : transparent ; width : 40% ; }
6 .raised h1,.raised p { margin : 0 10px ; }
7 .raised h1 { font-size : 2em ; color : #fff ; }
8 .raised p { padding-bottom : 0.5em ; }
9 .raised .b1,.raised .b2,.raised .b3,.raised .b4,.raised .b1b,.raised .b2b,.raised .b3b,.raised .b4b { display : block ; overflow : hidden ; font-size : 1px ; }
10 .raised .b1,.raised .b2,.raised .b3,.raised .b1b,.raised .b2b,.raised .b3b { height : 1px ; }
11 .raised .b2 { background : #ccc ; border-left : 1px solid #fff ; border-right : 1px solid #eee ; }
12 .raised .b3 { background : #ccc ; border-left : 1px solid #fff ; border-right : 1px solid #ddd ; }
13 .raised .b4 { background : #ccc ; border-left : 1px solid #fff ; border-right : 1px solid #aaa ; }
14 .raised .b4b { background : #ccc ; border-left : 1px solid #eee ; border-right : 1px solid #999 ; }
15 .raised .b3b { background : #ccc ; border-left : 1px solid #ddd ; border-right : 1px solid #999 ; }
16 .raised .b2b { background : #ccc ; border-left : 1px solid #aaa ; border-right : 1px solid #999 ; }
17 .raised .b1 { margin : 0 5px ; background : #fff ; }
18 .raised .b2, .raised .b2b { margin : 0 3px ; border-width : 0 2px ; }
19 .raised .b3, .raised .b3b { margin : 0 2px ; }
20 .raised .b4, .raised .b4b { height : 2px ; margin : 0 1px ; }
21 .raised .b1b { margin : 0 5px ; background : #999 ; }
22 .raised .boxcontent { display : block ; background : #ccc ; border-left : 1px solid #fff ; border-right : 1px solid #999 ; }
23
24
25 </style>
26 </head>
27 <body>
28
29 <div class="raised">
30 <b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b>
31 <div class="boxcontent">
32 <h1>3D圆角矩形</h1>
33 </div>
34 <b class="b4b"></b><b class="b3b"></b><b class="b2b"></b><b class="b1b"></b>
35 </div>
36 </body>
37 </html>
38
39
圆角5
2 <HEAD>
3 <style>
4
5 .raised { background : transparent ; width : 40% ; }
6 .raised h1,.raised p { margin : 0 10px ; }
7 .raised h1 { font-size : 2em ; color : #fff ; }
8 .raised p { padding-bottom : 0.5em ; }
9 .raised .b1,.raised .b2,.raised .b3,.raised .b4,.raised .b1b,.raised .b2b,.raised .b3b,.raised .b4b { display : block ; overflow : hidden ; font-size : 1px ; }
10 .raised .b1,.raised .b2,.raised .b3,.raised .b1b,.raised .b2b,.raised .b3b { height : 1px ; }
11 .raised .b2 { background : #ccc ; border-left : 1px solid #fff ; border-right : 1px solid #eee ; }
12 .raised .b3 { background : #ccc ; border-left : 1px solid #fff ; border-right : 1px solid #ddd ; }
13 .raised .b4 { background : #ccc ; border-left : 1px solid #fff ; border-right : 1px solid #aaa ; }
14 .raised .b4b { background : #ccc ; border-left : 1px solid #eee ; border-right : 1px solid #999 ; }
15 .raised .b3b { background : #ccc ; border-left : 1px solid #ddd ; border-right : 1px solid #999 ; }
16 .raised .b2b { background : #ccc ; border-left : 1px solid #aaa ; border-right : 1px solid #999 ; }
17 .raised .b1 { margin : 0 5px ; background : #fff ; }
18 .raised .b2, .raised .b2b { margin : 0 3px ; border-width : 0 2px ; }
19 .raised .b3, .raised .b3b { margin : 0 2px ; }
20 .raised .b4, .raised .b4b { height : 2px ; margin : 0 1px ; }
21 .raised .b1b { margin : 0 5px ; background : #999 ; }
22 .raised .boxcontent { display : block ; background : #ccc ; border-left : 1px solid #fff ; border-right : 1px solid #999 ; }
23
24
25 </style>
26 </head>
27 <body>
28
29 <div class="raised">
30 <b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b>
31 <div class="boxcontent">
32 <h1>3D圆角矩形</h1>
33 </div>
34 <b class="b4b"></b><b class="b3b"></b><b class="b2b"></b><b class="b1b"></b>
35 </div>
36 </body>
37 </html>
38
39
1
<HTML>
2 <HEAD>
3 <style>
4
5 .curved {
6 background : transparent ;
7 width : 40% ;
8 }
9 .curved h1, .curved p {
10 margin : 0 10px ;
11 }
12 .curved h1 {
13 font-size : 2em ;
14 color : #fff ;
15 }
16 .curved p {
17 padding-bottom : 0.5em ;
18 }
19 .curved .b1, .curved .b2, .curved .b3, .curved .b4 {
20 display : block ;
21 overflow : hidden ;
22 height : 1px ;
23 font-size : 1px ;
24 }
25 .curved .b2, .curved .b3, .curved .b4 {
26 background : #e0cea3 ;
27 border-left : 1px solid #fff ;
28 border-right : 1px solid #fff ;
29 }
30 .curved .b1 {
31 margin : 0 4px ;
32 background : #fff ;
33 }
34 .curved .b2 {
35 margin : 0 4px ;
36 height : 2px ;
37 }
38 .curved .b3 {
39 margin : 0 3px ;
40 }
41 .curved .b4 {
42 margin : 0 ;
43 height : 1px ;
44 border-width : 0 3px 0 3px ;
45 }
46 .curved .boxcontent {
47 display : block ;
48 background : #e0cea3 ;
49 border : 0 solid #fff ;
50 border-width : 0 1px ;
51 }
52
53
54 </style>
55 </head>
56 <body>
57
58 <div class="curved">
59 <b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b>
60 <div class="boxcontent">
61 <h1>略带菱形的css圆角矩形</h1>
62 </div>
63 <b class="b4"></b><b class="b3"></b><b class="b2"></b><b class="b1"></b>
64 </div>
65 </body>
66 </html>
67
68
2 <HEAD>
3 <style>
4
5 .curved {
6 background : transparent ;
7 width : 40% ;
8 }
9 .curved h1, .curved p {
10 margin : 0 10px ;
11 }
12 .curved h1 {
13 font-size : 2em ;
14 color : #fff ;
15 }
16 .curved p {
17 padding-bottom : 0.5em ;
18 }
19 .curved .b1, .curved .b2, .curved .b3, .curved .b4 {
20 display : block ;
21 overflow : hidden ;
22 height : 1px ;
23 font-size : 1px ;
24 }
25 .curved .b2, .curved .b3, .curved .b4 {
26 background : #e0cea3 ;
27 border-left : 1px solid #fff ;
28 border-right : 1px solid #fff ;
29 }
30 .curved .b1 {
31 margin : 0 4px ;
32 background : #fff ;
33 }
34 .curved .b2 {
35 margin : 0 4px ;
36 height : 2px ;
37 }
38 .curved .b3 {
39 margin : 0 3px ;
40 }
41 .curved .b4 {
42 margin : 0 ;
43 height : 1px ;
44 border-width : 0 3px 0 3px ;
45 }
46 .curved .boxcontent {
47 display : block ;
48 background : #e0cea3 ;
49 border : 0 solid #fff ;
50 border-width : 0 1px ;
51 }
52
53
54 </style>
55 </head>
56 <body>
57
58 <div class="curved">
59 <b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b>
60 <div class="boxcontent">
61 <h1>略带菱形的css圆角矩形</h1>
62 </div>
63 <b class="b4"></b><b class="b3"></b><b class="b2"></b><b class="b1"></b>
64 </div>
65 </body>
66 </html>
67
68