js--自定义圆角
参考了这篇博文，自己实现了下面的例子：http://www.99css.com/archives/146
自适应圆角实现，传统方法：
<div class="rc"> <b class="top"> <b class="rc1"></b> <b class="rc2"></b> </b> <div class="bd"> <p>LGM!</p> </div> <b class="bottom"> <b class="rc2"></b> <b class="rc1"></b> </b> </div>
css部分：
*{
padding:0;
margin:0;
}
body{
margin:100px;
background-color:red;
}
div,p,b{
margin:0;
padding:0;
}
b{
display:block;
}
.rc{
display:inline-block;
float:left;
border-style:solid;
border-color:black;
background-color:yellow;
border-width:0 1px;
}
.rc1{
border-style:solid;
border-color:black;
background-color:yellow;
height:1px;
overflow:hidden;
margin:0 2px;
border-width:1px 0 0 ;
}
.rc2{
border-style:solid;
border-color:black;
background-color:yellow;
height:1px;
overflow:hidden;
border-width:0 1px;
margin:0 1px;
}
.bd{
border-style:solid;
border-color:black;
background-color:yellow;
border-width:0 1px;
padding:0 6px;
line-height:1.5;
}
改进版：
body{margin:100px;background-color:red;}
div, p{margin:0;padding:0;}
.div1, .div2, .div3{display:inline-block;#display:inline;#zoom:1;position:relative;border-style:solid;border-color:black;}
.div1{border-width:1px;}
.div2, .div3{#left:-2px;border-width:0 1px;background-color:yellow;}
.div2{margin:0 -2px;}
.div3{margin:1px -2px;padding:0 6px;line-height:1.5;}
.arrow1, .arrow2{position:absolute;top:7px;width:0;height:0;overflow:hidden;border-top:6px transparent dotted;border-bottom:6px transparent dotted;}
.arrow1{left:-9px;border-right:6px black solid;}
.arrow2{left:-8px;border-right:6px yellow solid;}
</style>
</head>
<body>
<div class="div1">
<div class="div2">
<div class="div3">
<p>FML!!!</p>
</div>
</div>
<div class="arrow1"></div>
<div class="arrow2"></div>
</div>
