curvycorners,一个网页Elements圆角的js实现。浏览及使用看这里
测试代码:
<html>
<head>
<style type="text/css">
#Test1{border:solid 1px red;width:200px;height:200px;}
#Test2{border:solid 1px blue; background:white;width:200px;height:200px;}
#Test3{border:solid 1px green; background:#EEE;width:200px;height:200px;}
</style>
</head>
<body>
<div id="Test1">
<h3>Test1</h3>
<p>without background-color seted #FFFFFF(white)</p>
</div>
<p/>
<div id="Test2">
<h3>Test2</h3>
<p>the div's background-color was seted #FFFFFF</p>
</div>
<p/>
<!--<div id="Test3">
<h3>Test3</h3>
<p>the div's background-color was seted #EEE</p>
</div>-->
<script type="text/javascript" src="curvycorners.src.js"></script>
<script type="text/javascript">
function initCorners() {
var settings = {
tl: { radius: 5 },
tr: { radius: 5 },
bl: { radius: 5 },
br: { radius: 5 },
antiAlias: true
}
curvyCorners(settings, "#Test1");
curvyCorners(settings, "#Test2");
curvyCorners(settings, "#Test3");
}
initCorners();
</script>
</body>
</html>
当元素的backgroundcolor 未设置时,curvycorners在chrome浏览器中
var boxColour = curvyBrowser.get_style(this.box, "backgroundColor");
时获取的boxColour是rgb(0,0,0)黑色,然后生成的圆角边框导致上限边框变成两条黑色的粗条。
解决办法很简单,就是在该元素的css中加入background-color:#FFF; 。