兼容IE FF CSS 阴影背景半透明

来源：互联网发布：百度文库的网络外部性编辑：程序博客网时间：2024/05/22 10:48
 1 <html>
 2 <head>
 3     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 4     <title>CSS test</title>
 5     <style type="text/css">
 6         body
 7 {
 8             margin: 0; /*背景图片固定居中
 9             http://www.w3school.com.cn/css/pr_background-position.asp
10             http://www.198484.com/?action=show&id=51
11 */
12             background-image: url('images/bg1.jpg');
13             background-attachment: fixed;
14             background-position: center;
15             background-repeat: no-repeat;
16 }
17         #header
18 {
19 }
20         #inner-header
21 {
22             margin: 0 auto;
23             width: 960px;
24             background-color: Gray;
25             height: 80px; /*布局块阴影，如果不想支持低版本IE可去掉滤镜
26             http://blog.imbolo.com/cross-browsers-css-shadow/
27 */
28             box-shadow: 3px 3px 4px #000;
29             -moz-box-shadow: 3px 3px 4px #000;
30             -webkit-box-shadow: 3px 3px 4px #000;
31             filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000');
32             -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')";
33 }
34         #main
35 {
36             background-color: Gray;
37             margin: 10 auto;
38             width: 960px;
39             min-height: 500px;
40             height: auto; /*
41             背景半透明
42             http://blog.csdn.net/zenwong/archive/2008/08/29/2846546.aspx
43 */
44             filter: alpha(opacity=70); /*IE*/
45             -moz-opacity: 0.7; /*Mozilla*/
46             opacity: 0.7; /*FF*/ /*
47             圆角效果，不考虑低版本IE
48             http://blog.imbolo.com/creating-rounded-corners-with-css/
49 */
50             -moz-border-radius: 20px;
51             -webkit-border-radius: 20px;
52             border-radius: 20px;
53 }
54         #footer
55 {
56             margin: 0 auto;
57             width: 960px;
58             height: 100px; /*渐变效果
59             http://www.zhangxinxu.com/wordpress/?p=743
60 */
61             filter: alpha(opacity=100 finishopacity=50 style=1 startx=0,starty=0,finishx=0,finishy=150) progid:DXImageTransform.Microsoft.gradient(startcolorstr=red,endcolorstr=blue,gradientType=0);
62             -ms-filter: alpha(opacity=100 finishopacity=50 style=1 startx=0,starty=0,finishx=0,finishy=150) progid:DXImageTransform.Microsoft.gradient(startcolorstr=red,endcolorstr=blue,gradientType=0); /*IE8*/
63             background-color: Gray; /* 一些不支持背景渐变的浏览器 */
64             background: -moz-linear-gradient(top, red, rgba(0, 0, 255, 0.5));
65             background: -webkit-gradient(linear, 0 0, 0 bottom, from(#ff0000), to(rgba(0, 0, 255, 0.5)));
66             background: -o-linear-gradient(top, red, rgba(0, 0, 255, 0.5));
67 }
68 </style>
69     <!--[if IE]>
70     <style type="text/css">
71         #main
72         {
73             height: 500px;
74         }
75         body
76         {
77             text-align:center;
78         }
79         #inner-header
80         {
81         text-align:left;
82         }
83     </style>
84     <![endif]-->
85 </head>
86 <body>
87     <div id="header">
88         <div id="inner-header">
89             <h1>
90                 CSS Demo</h1>
91         </div>
92     </div>
93     <div id="main">
94     </div>
95     <div id="footer">
96     </div>
97 </body>
98 </html>
0 0
兼容IE FF CSS 阴影 背景半透明

兼容IE FF CSS 阴影背景半透明
