18Jul/051
无图片实现圆角框
以前的老文章，贴到这边来。
-----------------------------------
以前在网页上为了实现圆角框总要搞上几个小图片，今天总于找到了纯CSS实现的圆角框，下载代码。很简单就几行，稍微变化一下就可以做各种圆角了。
代码：
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=gb2312">
<style type="text/css">
div.RoundedCorner{background: #9BD1FA}
<head>
<meta http-equiv="content-type" content="text/html; charset=gb2312">
<style type="text/css">
div.RoundedCorner{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 class="RoundedCorner">
<b class="rtop"><b class="r1">b><b class="r2">b><b class="r3">b><b class="r4">b>b>
<br>无图片实现圆角框<br><br>
<b class="rbottom"><b class="r4">b><b class="r3">b><b class="r2">b><b class="r1">b>b>
div>
body>
html>
style>
head>
<body>
<div class="RoundedCorner">
<b class="rtop"><b class="r1">b><b class="r2">b><b class="r3">b><b class="r4">b>b>
<br>无图片实现圆角框<br><br>
<b class="rbottom"><b class="r4">b><b class="r3">b><b class="r2">b><b class="r1">b>b>
div>
body>
html>
效果图如下： 
随便听听
Tags
.NET 及开发
ASP.NET
Coding Standard
HTML & CSS
MVC
Office
Project Management
SharePoint
Silverlight
Team Foundation Server
Tips
WordPress
世博
晓语
杂谈
照片
视频
音乐
Categories
Recent Posts
Recent Comments
- 发条兔子 on 朱家尖计划
- hzliqiu on 芝华士广告歌 – When You Know
- Calla on 朱家尖计划
- 发条兔子 on 下了 Visual Studio 2010 和 TFS 2010
- ck on 下了 Visual Studio 2010 和 TFS 2010