文章目录
- 圆角方法一
- 圆角方法二（推荐）
- 透明圆角方法一
- 透明圆角方法二（推荐）
圆角方法一
/* 添加圆角 方法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>
