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

很久不更新博客，整理了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>