curvycorners控件在chrome 谷歌浏览器下 会产生上下边框变黑色 的情况,解决办法
2011-04-03 22:00 kwjlk 阅读(1426) 评论(1) 编辑 收藏 举报curvycorners,一个网页Elements圆角的js实现。浏览及使用看这里
![](https://pic002.cnblogs.com/images/2011/79702/2011040321520984.jpg)
测试代码:
<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; 。