Wawa recommends: css background image fixed and centered, div shadow, background translucency, div rounded corners, DIV gradient_html/css_WEB-ITnose

I haven’t updated my blog for a long time. I have compiled some common CSS effects and tried to be compatible with as many browsers as possible, including fixed centering of background images, div shadows, background translucency, div rounded corners, DIV gradients, etc.

                  <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>