div+css无图片实现圆角矩形

摘要：在做页面的时候，很多时候会用圆角矩形来妆点一下，但如果用图片的话，即要用到图片又要用到大量的代码，势必

在做页面的时候，很多时候会用圆角矩形来妆点一下，但如果用图片的话，即要用到图片又要用到大量的代码，势必增加了页面的重量

在页面的时候刚好要用到圆角矩形，于是写了以下方法，分享一下

以下为引用的内容：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">

<head>

<title>div+css无图片实现圆角矩形</title>

<!--

.RoundedCorner{background:url(../images/loginBg2.gif) 0 0 repeat-x;}

b.rtop, b.rbottom{display:block;background:#ffffff;}

b.rtop b, b.rbottom b{display:block;height: 1px;overflow: hidden;}

b.r1{margin: 0 3px;border-left:1px #DBDBDB solid;border-right:1px #DBDBDB solid;background: #DBDBDB;}

b.r2{margin: 0 2px;border-left:1px #DBDBDB solid;border-right:1px #DBDBDB solid;background:url(../images/loginBg2.gif) 0 -3px repeat-x;}

b.r3{margin: 0 1px;border-left:1px #DBDBDB solid;border-right:1px #DBDBDB solid;background:url(../images/loginBg2.gif) 0 -2px repeat-x;}

.content{border-left:1px #DBDBDB solid;border-right:1px #DBDBDB solid;}

b.r8{margin: 0 3px;border-left:1px #DBDBDB solid;border-right:1px #DBDBDB solid;background: #DBDBDB;}

b.r7{margin: 0 2px;border-left:1px #DBDBDB solid;border-right:1px #DBDBDB solid;}

b.r6{margin: 0 1px;border-left:1px #DBDBDB solid;border-right:1px #DBDBDB solid;}

-->

</style>

</head>

<body>

</b>

点击排行榜: 关于CSS中a:link无效以及a:link、a:viDIVCSS教程14-06-08; 空的a标签在ie7、ie8下无效DIVCSS教程14-06-04; DIV一直显示在屏幕中间的2种方法DIVCSS教程14-05-05; li中包含a和span时的错位问题DIVCSS教程14-04-23; 去掉input,textarea在得到焦点时出现黄DIVCSS教程15-01-19

站长推荐: 上交所召开第一届科创板股票上市DIVCSS教程19-04-22; HTML5 window.postMessage与跨域问题DIVCSS教程17-11-24; DIV+CSS布局中p元素引起的问题DIVCSS教程17-11-24; DIV CSS完美兼容IE6/IE7/FF的通用方法DIVCSS教程17-11-24; 避免常见的6种HTML5错误用法DIVCSS教程17-11-22