为了增加页面的美观效果,有时需要将div层或表格的边角进行圆角处理。下面介绍一个老外用CSS写的实例:

用CSS制作圆角div

CSS:

/*注意CSS标签之间的嵌套*/
body{padding: 20px;background-color: #FFF;  font: 100.01% "Trebuchet MS",Verdana,Arial,sans-serif;} h1,h2,p{margin: 0 10px;} h1{font-size: 250%;color: #FFF;} h2{font-size: 200%;color: #ff0000;} p{padding-bottom:1em;} h2{padding-top: 0.3em;} div#nifty{ margin: 0 10%;background: #9BD1FA;}/*div的背景颜色与B标签同*/ b.rtop, b.rbottom{display:block;background: #FFF;}/*B标签的背景颜色与body标签同*/ b.rtop b, b.rbottom b{display:block;height: 1px; overflow: hidden; background: #9BD1FA;}/*B标签的背景颜色与div标签同*/ b.r1{margin: 0 5px;} b.r2{margin: 0 3px;} b.r3{margin: 0 2px;} b.rtop b.r4, b.rbottom b.r4{margin: 0 1px;height: 2px;}
HTML:
<div id="nifty"> <b><b></b><b></b><b></b><b></b></b> <h1>Nifty Corners</h1> <p>Auiiui  uieiouo auuaa oiaue uaou iioiiou uiio a io ieeoai uaouoe uoiaau eeauauou u oiauuie eo ui.</p> <h2>Rounded corners without images</h2> <p>Aaeao aiieuouiu io ueuiieu uei oeio uooiau uue ooiea ooiaui eue ouue i uiaoo iouieiuia uueeo ieieuiiau ueaooa iou iaeieuo uoao iauoi u i oeioooe auo a ooe u uuuo oaooaae uoa iuiuiaeu iioaeu uuiu eeu ea eouoiuo ua o.</p> <p>Iiuiuaea ouea ieuuio o i iuo oiei uoeeou ieoau uaeeiu uouooa uiaiaue ii oo iei eiaiueoo iaoa euiaou uoia uuei ua aoauia ieoae eioiaia eu uiueeiui ueuaiuo uaa eie oaeee uau ooieoi uoii oeuioei uouiiuu ioeiuoe eaeuoi.</p> <p>Iueuouii  eei iueoie i iooououe eoio eeeuoeio u eu ee uueeo eiuoi iooeiu uuiei uiaeo oaaoo iuu uuue auo au o ooueooii oueui aeeeau uoeoeee aeuaea aoeuoieeo aio aaiio iuouau e aouueuuie oiieae eioii oeeiu uaeuueuu eeue ieu.</p> <b><b></b><b></b><b></b><b></b></b> </div>


© 活着的博客 - 李权辉的个人博客:人,终究是生活在现实之中,是为了活着而生活.