发新话题
打印

[代码收藏]CSS无图片实现圆角框

[代码收藏]CSS无图片实现圆角框

复制内容到剪贴板
代码:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>css圆角矩形</title>
<meta http-equiv="content-type" content="text/html; charset=gb2312" />
<meta http-equiv="Content-Language" content="zh-CN" />
<style type="text/css">
body{padding: 20px;background-color: #FFF;font: 14px,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 30px;background: #9BD1FA;}
.text{ margin: 5px;background: #9BD1FA;padding-left: 20px}
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>
<div class=text>
<h1>csscss圆角矩形</h1>
<br />
<p>测试</p>
<h2>无图片</h2>
<br />
<p>无图片实现圆角框</p>
</div>
<b class="rbottom"><b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r1"></b></b>
</div>
</body>
</html>
烟台,加油!

TOP

谢谢,很管用~!我正要找这个代码呢,的来全不费功夫
左手刻着我,右手写着你,心中充满爱,当我们掌心相对,心心相印时,所有的人都会看到

TOP

发新话题