<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<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#corner{
margin: 0 10%;background: #9BD1FA;width:400px;
}
b.top, b.bottom{
display:block;background: #FFF
}
b.top b, b.bottom 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.top b.r4, b.bottom b.r4{
margin: 0 1px;height: 2px
}
</style>
</head>
<body>
<div id="corner">
<b class="top"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b></b>
<h1>Rounded corners</h1>
<p>Rounded corners.</p>
<h2>Rounded corners</h2>
<p>
Rounded corners.Rounded corners.<br/>
Rounded corners.Rounded corners.<br/>
Rounded corners.Rounded corners.<br/>
Rounded corners.Rounded corners.<br/>
Rounded corners.Rounded corners.<br/>
</p>
<b class="bottom"><b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r1"></b></b>
</div>
</body>
</html>
最终效果：
分享到：
相关推荐
用CSS实现无图片圆角效果!里面有好几种哦！
javascript+css无图片圆角效果 告别复杂的图片圆角布局，调用简单 效果漂亮，样式可灵活调整！
这是一个css3里的属性处理圆角技术的问题，其中也包括用全用js处理圆角问题，在这里提供大家，希望对大家做网页有点用
jquery轻松实现菜单下拉 无图片
div无图片圆角，方便您，同时让我获得更多的积分~~~
用css控制的无图片圆角table div#nifty{ margin: 0 10%;background: #9BD1FA} p {padding:10px}
在WPF中，无需编写C#代码，即可通过XAML实现图片的圆角、倒角、只显示部分内容、渐变等效果，在很多软件中大量使用。此示例模块化编写，代码简单易懂。
易语言Exdui自绘模块，利用Gdip纹理画刷搞的一个自定义角度的，圆角图片框！
为HTML网页做圆角。汇集css 无图片圆角，CSS圆角区块容器，div + CSS 圆角矩，WEB2.0 圆形边框 div 使用 css 做法。
CSS圆角效果（无背景图片）。。。。。。
超实用div圆角样式，无须图片 超实用div圆角样式，无须图片
div+css无图片实现圆角矩形(兼容Firefox)
无图片的圆角表格
无图片 CSS 圆角的 五个实例
自定义ugui 无锯齿圆滑圆角头像，圆角图形 shader支持UGUI 的mask
CSS圆角菜单，无图片实现圆角弹出式多级菜单，不用图片实现圆角
NULL 博文链接：https://caiceclb.iteye.com/blog/466223
无图片实现圆角弹出式多级菜单