一张图片实现自适应容器圆角（兼容IE6,7,FF）

7月 12th, 2008

xhtml+css实现圆角图片一法！比较简单！

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>一张图片实现自适应容器圆角（兼容IE6,7,FF）</title>
  6. <style type="text/css">
  7. <!--
  8. #center { width:60%; margin:0 auto; margin-top:50px; border:1px solid #c6c6c6; background:#f8f8f8;}
  9. .yj_rz_tl,.yj_rz_tr,.yj_rz_bl,.yj_rz_br{ display:block; height:5px; line-height:5px; font-size:1px;}
  10. .yj_rz_tl{ margin:0 -1px; position:relative; top:-1px; background:url(http://www.twolook.com/wp-content/uploads/2008/07/bg_yj_rz.gif) left 0 no-repeat;}
  11. .yj_rz_tr{ background:url(http://www.twolook.com/wp-content/uploads/2008/07/bg_yj_rz.gif) right -5px no-repeat;}
  12. .yj_rz_bl{ margin:0 -1px; position:relative; top:1px; background:url(http://www.twolook.com/wp-content/uploads/2008/07/bg_yj_rz.gif) left -15px no-repeat; clear:both;}
  13. .yj_rz_br{ background:url(http://www.twolook.com/wp-content/uploads/2008/07/bg_yj_rz.gif) right -10px no-repeat;}
  14. -->
  15. </style>
  16. </head>
  17.  
  18. <body>
  19. <div id="center"><span class="yj_rz_tl"><span class="yj_rz_tr"></span></span>
  20. 瞧瞧的自留地 Twolook.com 瞧瞧的自留地 Twolook.com 瞧瞧的自留地 Twolook.com 瞧瞧的自留地 Twolook.com 瞧瞧的自留地 Twolook.com 瞧瞧的自留地 Twolook.com 瞧瞧的自留地 Twolook.com 瞧瞧的自留地 Twolook.com 瞧瞧的自留地 Twolook.com 瞧瞧的自留地 Twolook.com 瞧瞧的自留地 Twolook.com 瞧瞧的自留地 Twolook.com 瞧瞧的自留地 Twolook.com 瞧瞧的自留地 Twolook.com 瞧瞧的自留地 Twolook.com 瞧瞧的自留地 Twolook.com 瞧瞧的自留地 Twolook.com 瞧瞧的自留地 Twolook.com 瞧瞧的自留地 Twolook.com 瞧瞧的自留地 Twolook.com 瞧瞧的自留地 Twolook.com 瞧瞧的自留地 Twolook.com 瞧瞧的自留地 Twolook.com 瞧瞧的自留地 Twolook.com 瞧瞧的自留地 Twolook.com 瞧瞧的自留地 Twolook.com 瞧瞧的自留地 Twolook.com 瞧瞧的自留地 Twolook.com 瞧瞧的自留地 Twolook.com 瞧瞧的自留地 Twolook.com 瞧瞧的自留地 Twolook.com 瞧瞧的自留地 Twolook.com 瞧瞧的自留地 Twolook.com
  21.   <span class="yj_rz_bl"><span class="yj_rz_br"></span></span>  </div>
  22. </body>
  23. </html>

圆角图片

Posted in 我还活着 | 15 views

1 条评论

  • At 2008.09.23 23:57, dztoay said:

    vfefbpbaiybyqoahvrdzgneypimofg

    [Reply]
    (Required)
    (Required, will not be published)