用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>
- 相关文章
- IE6的双倍边距BUG - 2008-06-29
- 2008.5.19-2008.5.21 让网站变灰沉痛哀悼地震遇难者 - 2008-05-19
- 百度空间的圆角矩形 - 2008-02-21
- 理解background-position属性 - 2008-02-19
- css兼容ie5.x及以下特殊写法hack - 2008-02-18
- 鼠标滑过显示横向下拉菜单 - 2008-01-21
- ie7空格的间距要比ie6/firefox/opera的都要大 - 2007-11-29
- 各浏览器有序列表样式的兼容研究 - 2007-10-27
- ie下容器1px高度的解决方案 - 2007-10-27
- 用css来定义table的样式 - 2007-10-11
- 上一篇：关于css的重复定义
- 下一篇：动易div重构完成
