几个圆角实例

圆角1
<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
 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
 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
 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
 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 


posted on 2007-08-01 11:22  kuning的程序博客  阅读(346)  评论(0)  编辑  收藏  举报