您的位置：首页 > Web前端 > CSS

div+CSS圆角矩形

2012-05-05 23:08 323 查看


源码:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xHTML1/DTD/xHTML1-transitional.dtd">

<HTML XMLns="http://www.w3.org/1999/xHTML" lang="gb2312">

<head>

<meta http-equiv="Content-Type" content="text/HTML; charset=gb2312" />

<title>div+CSS圆角矩形</title>

<style type="text/CSS">

body{padding: 20px;background-color: #FFF;font: 100.01% "Trebuchet MS",Verdana,Arial,sans-serif}

div#nifty{ margin: 0 10%;background: #9BD1FA}

p {padding:10px}

div.rtop, div.rbottom{display:block;background: #fFF}

div.rtop div, div.rbottom div{display:block;height: 1px;overflow: hidden; background: #9BD1FA}

div.r1{margin: 0 5px}

div.r2{margin: 0 3px}

div.r3{margin: 0 2px}

div.rtop div.r4, div.r4{margin: 0 1px;height: 2px}

</style>

</head>

<body>

<div id="nifty">

<div class="rtop">

<div class="r1"></div>

<div class="r2"></div>

<div class="r3"></div>

<div class="r4"></div>

</div>

<p>这是您要放的内容！</p>

<div class="rtop">

<div class="r4"></div>

<div class="r3"></div>

<div class="r2"></div>

<div class="r1"></div>

</div>

</div>

</body>

</hmtl>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航