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>

　　

posted @ 2013-01-28 00:00  GM_Lv  阅读(638)  评论(0)    收藏  举报