终于找到一个没有使用VML制作的圆角效果的层,仔细看了一下代码,其实也很简单,用几个b作了点小小的欺骗,应该也算是技巧了吧,以下是代码:
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
- <html>
- <head>
- <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
- <meta name="generator" content="HAPedit 3.1">
- <style type="text/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: #f0f0f0}
- p{padding-bottom:1em}
- h2{padding-top: 0.3em}
- div#nifty{ margin: 0 10%;background: #9BD1FA}
- b.rtop, b.rbottom{display:block;background: #FFF}
- b.rtop b, b.rbottom b{display:block;height: 1px;
- overflow: hidden; background: #9BD1FA}
- 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}
- </style>
- </head>
- <body>
- <div id="nifty">
- <b class="rtop"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b></b></p>
- <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.
- 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.
- 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 class="rbottom"><b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r1"></b></b></div>
- </body>
- </html>