[转]用CSS制作的圆角层

终于找到一个没有使用VML制作的圆角效果的层,仔细看了一下代码,其实也很简单,用几个<b></b>作了点小小的欺骗,应该也算是技巧了吧,以下是代码:
 
<!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01//EN <a href="http://www.w3.org/tr/html4/strict.dtd" target="_blank">http://www.w3.org/tr/html4/strict.dtd</a>>
<html>
<head>
<title>Nifty Corners: HTML CSS rounded corners</title>
<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>
<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 class=rbottom><b class=r4></b><b class=r3></b><b class=r2></b><b class=r1></b></b>
</div>
</body>
</html>
 
 

posted on 2006-06-14 17:53 简单就是美 阅读(54) 评论(0)  编辑  收藏 所属分类: HTML(CSS)

导航

统计

常用链接

随笔分类(95)

随笔档案(91)

新闻分类(6)

新闻档案(15)

积分与排名

最新评论

阅读排行榜