百度百科的CSS圓角效果_層和布局特效
來自百度百科里的CSS圓角效果，代碼稍復雜了點，全部是用CSS實現的，其實是用CSS分別定義方框的四個角的圖片，達到了圓角效果，有興趣的朋友仔細琢磨一下。<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" mrc="text/html; charset=gb2312"> <title>百度百科CSS圓角</title> <style type="text/css"> body{margin:4px 10px 4px 8px;background:#fff;color:#000;text-align:center} form,h1,h2,h3,h4,ul,li,dl,dt,dd{margin:0;padding:0} body,div,td,th{font-family:Arial;font-size:14px} div{text-align:left} img{border:0} ul{list-style:none} a{color:#36c;text-decoration:underline} .bg{background:#F6F6F6} .l{float:left} .r{float:right} .clear{clear:both;font-size:0;line-height:0;height:0;visibility:visible} .area2{width:771px;margin-left:11px;background:#dddfe1;} .more{font-size:12px;font-weight:normal;padding-right:10px;float:right;1122123<img src=http://p1.mb5u.com/texiao/3/20100522231249305.gif _fcksavedurl=http://p1.mb5u.com/texiao/3/20100522231249305.gif>2244234background:url(http://p1.mb5u.com/texiao/3/20100522231249305.gif) no-repeat right 3px;padding-right:8px;text-decoration:none;margin-top:3px} a.more:hover{text-decoration:underline} .title{text-decoration:none;color:#000} .box1,.box2{margin-top:10px} .box1 .r2_1,.box1 .r2_2,.box1 .r2_3,.box1 .r2_4,.box2 .r2_1,.box2 .r2_2,.box2 .r2_3,.box2 .r2_4{display:block;width:8px;height:8px;overflow:hidden;1122123<img src=http://p1.mb5u.com/texiao/3/20100522231249305.gif _fcksavedurl=http://p1.mb5u.com/texiao/3/20100522231249305.gif>2244234background:url(http://p1.mb5u.com/texiao/3/20100522231249305.gif)} .box1 .r2_1{background-position:0 -365px} .box1 .r2_2{background-position:-8px -365px} .box1 .r2_3{background-position:0 -373px;margin-top:-8px} .box1 .r2_4{background-position:-8px -373px;margin-top:-8px} .box2 .r2_1{background-position:0 -391px} .box2 .r2_2{background-position:-8px -391px} .box2 .r2_3{background-position:0 -399px;margin-top:-8px} .box2 .r2_4{background-position:-8px -399px;margin-top:-8px} .box1 .brd{border:3px solid #dddfe1;background:#fff} .box2 .brd{border:3px solid #c7c7c7;background:#fff} .box1 h1,.box2 h1{font-size:14px;padding:5px 0 2px 15px;line-height:22px;border-bottom:1px solid #d4d4d4;1122123<img src=http://p1.mb5u.com/texiao/3/20100522231249306.gif _fcksavedurl=http://p1.mb5u.com/texiao/3/20100522231249306.gif>2244234background:url(http://p1.mb5u.com/texiao/3/20100522231249306.gif) repeat-x 0 -88px} .box1 h1 div,.box2 h1 div{position:relative} .box1 h1 .more,.box2 h1 .more{position:absolute;right:10px;line-height:16px} .box3{width:380px;} .good_word{height:200px;padding:10px} </style> </head> <body> <div class="area2"> <div class="box3 l"> <div class="box1" onMouseOver="this.className='box2'" onMouseOut="this.className='box1'"> <div><b class="r2_1 l"></b><b class="r2_2 r"></b></div> <div class="brd"> <h1><div><a href="http://baike.baidu.com" target="_blank" class="more">更多</a></div><a href="/" target="_blank" class="title">熱門詞條</a></h1> <div class="good_word"> aaa <div class="clear"></div> </div> </div> <div><b class="r2_3 l"></b><b class="r2_4 r"></b></div> </div> </div> <div class="box3 r"> <div class="box1" onMouseOver="this.className='box2'" onMouseOut="this.className='box1'"> <div><b class="r2_1 l"></b><b class="r2_2 r"></b></div> <div class="brd"> <h1><div><a href="http://baike.baidu.com/" target="_blank" class="more">更多</a></div><a href="/" target="_blank" class="title">待完善詞條</a></h1> <div class="good_word"> bbb </div> </div> <div><b class="r2_3 l"></b><b class="r2_4 r"></b></div> </div> </div> <div class="clear"></div> </div> </body> </html>
。