几个圆角实例

最新推荐文章于 2013-07-23 15:14:51 发布

abei7820

最新推荐文章于 2013-07-23 15:14:51 发布

阅读量64

点赞数

原文链接：http://www.cnblogs.com/NewLand/archive/2007/08/01/838747.html

版权

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

转载于:https://www.cnblogs.com/NewLand/archive/2007/08/01/838747.html

abei7820

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
几个圆角实例

圆角1<HTML><HEAD><style>.spiffy{display:block}.spiffy*{display:block;height:1px;overflow:hidden;font-size:.01em;background:#b20000}.spiffy1{margin-left:3px;margin...
复制链接

扫一扫