1. 论坛系统升级为Xenforo,欢迎大家测试!
    排除公告

关于CSS的层和类的圆角问题

本帖由 fen2006-10-02 发布。版面名称:前端开发

  1. fen

    fen New Member

    注册:
    2005-12-18
    帖子:
    3,050
    赞:
    25
    Firefox下可以在.css文件的层中加入-moz-border-radius: *px; 实现圆角
    在IE下该怎么解决呢呢? 除了用图片代替.
     
  2. fen

    fen New Member

    注册:
    2005-12-18
    帖子:
    3,050
    赞:
    25
    木人告诉我
    我自己解决
    不告诉你们答案:p
     
  3. Hoofei

    Hoofei New Member

    注册:
    2005-12-10
    帖子:
    3,162
    赞:
    35
    解决了?
     
  4. fen

    fen New Member

    注册:
    2005-12-18
    帖子:
    3,050
    赞:
    25
    代码:
    <style type="text/css">
    
    #xsnazzy h1, #xsnazzy h2, #xsnazzy p {margin:0 10px; letter-spacing:1px;}
    #xsnazzy h1 {font-size:2.5em; color:#fff;}
    #xsnazzy h2 {font-size:2em;color:#06a; border:0;}
    #xsnazzy p {padding-bottom:0.5em;}
    #xsnazzy h2 {padding-top:0.5em;}
    #xsnazzy {background: transparent; margin:1em;}
    
    .xtop, .xbottom {display:block; background:transparent; font-size:1px;}
    .xb1, .xb2, .xb3, .xb4 {display:block; overflow:hidden;}
    .xb1, .xb2, .xb3 {height:1px;}
    .xb2, .xb3, .xb4 {background:#d4d4d4; border-left:1px solid #08c; border-right:1px solid #08c;}
    .xb1 {margin:0 5px; background:#08c;}
    .xb2 {margin:0 3px; border-width:0 2px;}
    .xb3 {margin:0 2px;}
    .xb4 {height:2px; margin:0 1px;}
    
    .xboxcontent {display:block; background:#d4d4d4; border:0 solid #08c; border-width:0 1px;}
    
    
    </style>
    代码:
    <div id="xsnazzy">
    <b class="xtop"><b class="xb1"></b><b class="xb2"></b><b class="xb3"></b><b class="xb4"></b></b>
    <div class="xboxcontent">
    <h1>Snazzy Borders</h1>
    <p>Based on Nifty Corners By Alessandro Fulciniti<br />http://pro.html.it/esempio/nifty/</p>
    
    <h2>Rounded borders without images</h2>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
      euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim
      ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl
      ut aliquip ex ea commodo consequat.</p>
    <p>Duis autem vel eum iriure dolor in hendrerit
      in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla
      facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent
      luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
    
    </div>
    <b class="xbottom"><b class="xb4"></b><b class="xb3"></b><b class="xb2"></b><b class="xb1"></b></b>
    </div>
     
  5. fyfei

    fyfei New Member

    注册:
    2005-10-07
    帖子:
    9,067
    赞:
    46
    :ft: 为个圆角费这么多事。
     
  6. 弋翔网络1

    弋翔网络1 New Member

    注册:
    2006-07-07
    帖子:
    365
    赞:
    0