DIVcss背景图片固定居中,div阴影,背景半透明,div圆角,DIV渐变 【mark用】

< html >
< head >
< meta http-equiv ="Content-Type" content ="text/html; charset=utf-8" />
< title > CSS test </ title >
< style type ="text/css" >
body
{
margin
: 0 ;
background-image
: url('images/bg1.jpg') ;
background-attachment
: fixed ;
background-position
: center ;
background-repeat
: no-repeat ;
}
#header
{
}
#inner-header
{
margin
: 0 auto ;
width
: 960px ;
background-color
: Gray ;
height
: 80px ;
box-shadow
: 3px 3px 4px #000 ;
-moz-box-shadow
: 3px 3px 4px #000 ;
-webkit-box-shadow
: 3px 3px 4px #000 ;
filter
: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000') ;
-ms-filter
: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')" ;
}
#main
{
background-color
: Gray ;
margin
: 10 auto ;
width
: 960px ;
min-height
: 500px ;
height
: auto ;
filter
: alpha(opacity=70) ;
-moz-opacity
: 0.7 ;
opacity
: 0.7 ;
-moz-border-radius
: 20px ;
-webkit-border-radius
: 20px ;
border-radius
: 20px ;
}
#footer
{
margin
: 0 auto ;
width
: 960px ;
height
: 100px ;
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) ;
-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) ;
background-color
: Gray ;
background
: -moz-linear-gradient(top, red, rgba(0, 0, 255, 0.5)) ;
background
: -webkit-gradient(linear, 0 0, 0 bottom, from(#ff0000), to(rgba(0, 0, 255, 0.5))) ;
background
: -o-linear-gradient(top, red, rgba(0, 0, 255, 0.5)) ;
}
</ style >
<!-- [if IE]>
<style type="text/css">
#main
{
height: 500px;
}
body
{
text-align:center;
}
#inner-header
{
text-align:left;
}
</style>
<![endif]
-->
</ head >
< body >
< div id ="header" >
< div id ="inner-header" >
< h1 >
CSS Demo
</ h1 >
</ div >
</ div >
< div id ="main" >
</ div >
< div id ="footer" >
</ div >
</ body >
</ html >

你可能感兴趣的:(背景半透明,DIVcss背景图片固定居中,div阴影,div圆角,DIV渐变)