使表格边缘变圆的方法

最新推荐文章于 2021-05-30 22:46:51 发布

dsfas3432

最新推荐文章于 2021-05-30 22:46:51 发布

阅读量950

点赞数

分类专栏：前台技术文章标签： class generator html io css oo

7 篇文章 0 订阅

订阅专栏

代码如下，不过这么做很麻烦！用图片是最省事的方法！追求代码但不要迷信代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<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>

关注

专栏目录