文章目录
- 圆角方法一
- 圆角方法二（推荐）
- 透明圆角方法一
- 透明圆角方法二（推荐）
圆角方法一
/* 添加圆角 方法1：border-radius cs3不兼容*/.bo{width: 100px; height: 200px;border: 1px solid #e5e5e5;margin:30px auto;border-radius: 9px;}<div class="bo" > 叽叽喳喳<br/> 叽叽喳喳<br/> 叽叽喳喳<br/> 叽叽喳喳<br/></div>
圆角方法二（推荐）
/* 添加圆角 方法2：宽高可扩展 圆角宽高固定*/.box{width: 200px; margin: 30px;}.boxHead{background: url(img/boxH.png) repeat-x;height: 9px;overflow: hidden;}.boxHeadL{background: url(img/boxHL.png) no-repeat;}.boxHeadR{background: url(img/boxHR.png) no-repeat right 0;height: 9px;}.boxFoot{background: url(img/boxF.png) repeat-x;height: 9px;overflow: hidden;}.boxFootL{background: url(img/boxFL.png) no-repeat;}.boxFootR{background: url(img/boxFR.png) no-repeat right 0;height: 9px;}.boxC{border-left: 1px solid #e5e5e5;border-right: 1px solid #e5e5e5;}<div class="box" > <div class="boxHead"><div class="boxHeadL"> <div class="boxHeadR"> </div></div></div><div class="boxC"> 叽叽喳喳<br/> 叽叽喳喳<br/> 叽叽喳喳<br/> 叽叽喳喳<br/> 叽叽喳喳<br/> 叽叽喳喳<br/> 叽叽喳喳<br/> 叽叽喳喳<br/> 叽叽喳喳<br/> 叽叽喳喳<br/></div><div class="boxFoot"> <div class="boxFootL"> <div class="boxFootR"> </div></div> </div></div>
透明圆角方法一
两边角图像像素宽度为9px
.btn{width: 100px; margin: 0 auto;background: url(img/btn.gif) repeat-x;}.btnl{background: url(img/btnL.gif) no-repeat;position: relative;left: -9px;}.btnr{background:url(img/btnR.gif)no-repeat right 0;height: 25px;position: relative; right: -18px;}<div class="btn"><div class="btnl"> <div class="btnr"> </div></div></div>
透明圆角方法二（推荐）
.bnt1l{width: 100px;margin: 0 auto;background: url(img/btnL.gif) no-repeat;}.btn2r{background: url(img/btnR.gif) no-repeat right 0;}.btn2{height: 25px;background: url(img/btn.gif) repeat-x;margin: 0 9px;}<div class="bnt1l"><div class="btn2r"><div class="btn2"> </div></div></div>
圆角所有代码
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>body{background: #000;}/* 添加圆角 方法1：border-radius cs3不兼容*/.bo{width: 100px; height: 200px;border: 1px solid #e5e5e5;margin:30px auto;border-radius: 9px;}/* 添加圆角 方法2：宽高可扩展 圆角宽高固定*/.box{width: 200px; margin: 30px;}.boxHead{background: url(img/boxH.png) repeat-x;height: 9px;overflow: hidden;}.boxHeadL{background: url(img/boxHL.png) no-repeat;}.boxHeadR{background: url(img/boxHR.png) no-repeat right 0;height: 9px;}.boxFoot{background: url(img/boxF.png) repeat-x;height: 9px;overflow: hidden;}.boxFootL{background: url(img/boxFL.png) no-repeat;}.boxFootR{background: url(img/boxFR.png) no-repeat right 0;height: 9px;}.boxC{border-left: 1px solid #e5e5e5;border-right: 1px solid #e5e5e5;}/* 透明圆角*/.btn{width: 100px; margin: 0 auto;background: url(img/btn.gif) repeat-x;}.btnl{background: url(img/btnL.gif) no-repeat;position: relative;left: -9px;}.btnr{background:url(img/btnR.gif)no-repeat right 0;height: 25px;position: relative; right: -18px;}.bnt1l{width: 100px;margin: 0 auto;background: url(img/btnL.gif) no-repeat;}.btn2r{background: url(img/btnR.gif) no-repeat right 0;}.btn2{height: 25px;background: url(img/btn.gif) repeat-x;margin: 0 9px;}</style>
</head>
<body><div class="bo" > 叽叽喳喳<br/> 叽叽喳喳<br/> 叽叽喳喳<br/> 叽叽喳喳<br/></div><div class="box" > <div class="boxHead"><div class="boxHeadL"> <div class="boxHeadR"> </div></div></div><div class="boxC"> 叽叽喳喳<br/> 叽叽喳喳<br/> 叽叽喳喳<br/> 叽叽喳喳<br/> 叽叽喳喳<br/> 叽叽喳喳<br/> 叽叽喳喳<br/> 叽叽喳喳<br/> 叽叽喳喳<br/> 叽叽喳喳<br/></div><div class="boxFoot"> <div class="boxFootL"> <div class="boxFootR"> </div></div> </div></div><!-- 透明圆角方法一 --><div class="btn"><div class="btnl"> <div class="btnr"> </div></div></div><!-- 透明圆角方法二 --><div class="bnt1l"><div class="btn2r"><div class="btn2"> </div></div></div>
</body>
</html>
