IE支持CSS3圓角陰影演示 

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 5 <title>css3-border-radius演示</title>
 6 <style>
 7 body {
 8     background-color: #FFF;
 9     font: normal 11pt Trebuchet MS,Arial,sans-serif;
10 }
11 
12 .box1 {
13     background-color: #F0F0F0;
14     width: 533px;
15     height: 50px;
16     margin: 0 auto 15px auto;
17     padding: 30px;
18     border: 1px solid #D7D7D7;
19 
20     -moz-border-radius: 11px;
21     -webkit-border-radius: 11px;
22     border-radius: 11px;
23     behavior: url(http://www.weiking.com.cn/demo/css3-border-radius/border-radius.htc);
24 
25     filter: progid:DXImageTransform.Microsoft.Shadow(color='#969696', Direction=135, Strength=5);/*for ie6,7,8*/
26     background-color: #eee;
27     -moz-box-shadow:2px 2px 5px #969696;/*firefox*/
28     -webkit-box-shadow:2px 2px 5px #969696;/*webkit*/
29     box-shadow:2px 2px 5px #969696;/*opera或ie9*/
30 }
31 
32 .box2 {
33     width: 420px;
34     height: 220px;
35     margin: 0 auto 35px auto;
36     padding: 30px;
37     color: #FFF;
38     font-weight: bold;
39     border: 11px solid #35B70E;
40 
41     -moz-border-radius: 32px;
42     -webkit-border-radius: 32px;
43     border-radius: 32px;
44     behavior: url(http://www.weiking.com.cn/demo/css3-border-radius/border-radius.htc);
45 
46     filter: progid:DXImageTransform.Microsoft.Shadow(color='#969696', Direction=135, Strength=5);/*for ie6,7,8*/
47     background-color: #eee;
48     -moz-box-shadow:2px 2px 5px #969696;/*firefox*/
49     -webkit-box-shadow:2px 2px 5px #969696;/*webkit*/
50     box-shadow:2px 2px 5px #969696;/*opera或ie9*/
51 }
52 
53 .box3 {
54     background-color: #DDD;
55     width: 210px;
56     height: 30px;
57     padding: 20px;
58     position: absolute;
59     top: 5px; left: 5px;
60 
61     -moz-border-radius: 15px;
62     -webkit-border-radius: 15px;
63     border-radius: 15px;
64     behavior: url(http://www.weiking.com.cn/demo/css3-border-radius/border-radius.htc);
65 
66     filter: progid:DXImageTransform.Microsoft.Shadow(color='#969696', Direction=135, Strength=5);/*for ie6,7,8*/
67     background-color: #eee;
68     -moz-box-shadow:2px 2px 5px #969696;/*firefox*/
69     -webkit-box-shadow:2px 2px 5px #969696;/*webkit*/
70     box-shadow:2px 2px 5px #969696;/*opera或ie9*/
71 }
72 
73 .rel {
74     margin: 50px 0 0 33px;
75     padding: 25px;
76     position: relative;
77     z-index: inherit;
78     zoom: 1; /* For IE6 */
79 }
80 </style>
81 </head>
82 
83 <body>
84     <div class="rel">
85         <div class="box1">
86 
87             lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet 
88         </div>
89         <div class="box2">
90             this cat is a hybrid of domestic and wild breeds :)
91         </div>
92         <div class="box3">
93             this box is absolutely positioned
94         </div>
95     </div>
96 
97 </body>
98 </html>

 

posted @ 2012-02-01 23:06  hongcn  Views(236)  Comments(0)    收藏  举报