1. 论坛系统升级为Xenforo,欢迎大家测试!
    Dismiss Notice

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

Discussion in '前端开发' started by fen, Oct 2, 2006.

  1. fen

    fen New Member

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

    fen New Member

    Joined:
    Dec 18, 2005
    Messages:
    3,050
    Likes Received:
    25
    木人告诉我
    我自己解决
    不告诉你们答案:p
     
  3. Hoofei

    Hoofei New Member

    Joined:
    Dec 10, 2005
    Messages:
    3,162
    Likes Received:
    35
    解决了?
     
  4. fen

    fen New Member

    Joined:
    Dec 18, 2005
    Messages:
    3,050
    Likes Received:
    25
    Code:
    <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>
    Code:
    <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

    Joined:
    Oct 7, 2005
    Messages:
    9,067
    Likes Received:
    46
    :ft: 为个圆角费这么多事。
     
  6. 弋翔网络1

    弋翔网络1 New Member

    Joined:
    Jul 7, 2006
    Messages:
    365
    Likes Received:
    0