很久不更新博客，整理了CSS的一些常用效果，尽量兼容多的浏览器，包括背景图片固定居中，div阴影，背景半透明，div圆角，DIV渐变等。
<p class="sycode"> < html > < head > < meta http-equiv ="Content-Type" content ="text/html; charset=utf-8" /> < title > CSS test </ title > < style type ="text/css" > body { margin : 0 ; /* 背景图片固定居中 http://www.w3school.com.cn/css/pr_background-position.asp http://www.198484.com/?action=show&id=51 */ 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 ; /* 布局块阴影，如果不想支持低版本IE可去掉滤镜 http://blog.imbolo.com/cross-browsers-css-shadow/ */ 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 ; /* 背景半透明 http://blog.csdn.net/zenwong/archive/2008/08/29/2846546.aspx */ filter : alpha(opacity=70) ; /* IE */ -moz-opacity : 0.7 ; /* Mozilla */ opacity : 0.7 ; /* FF */ /* 圆角效果，不考虑低版本IE http://blog.imbolo.com/creating-rounded-corners-with-css/ */ -moz-border-radius : 20px ; -webkit-border-radius : 20px ; border-radius : 20px ; } #footer { margin : 0 auto ; width : 960px ; height : 100px ; /* 渐变效果 http://www.zhangxinxu.com/wordpress/?p=743 */ 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) ; /* IE8 */ 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 > </p>
