蛙蛙推荐：css背景图片固定居中，div阴影，背景半透明，div圆角，DIV渐变_html/css_WEB-ITnose

很久不更新博客，整理了CSS的一些常用效果，尽量兼容多的浏览器，包括背景图片固定居中，div阴影，背景半透明，div圆角，DIV渐变等。

                  
                                                      CSS test          title     >                 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     >                          head     >                                                 CSS Demo          h1     >                div     >                div     >                           div     >                           div     >               body     >               html     >