curvycorners控件在chrome 谷歌浏览器下会产生上下边框变黑色的情况，解决办法...

最新推荐文章于 2022-06-28 21:37:38 发布

weixin_30631587

最新推荐文章于 2022-06-28 21:37:38 发布

阅读量591

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/klvk/archive/2011/04/03/2004833.html

版权

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; 。

转载于:https://www.cnblogs.com/klvk/archive/2011/04/03/2004833.html

weixin_30631587

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
curvycorners控件在chrome 谷歌浏览器下会产生上下边框变黑色的情况，解决办法...

curvycorners，一个网页Elements圆角的js实现。浏览及使用看这里测试代码：<html><head><style type="text/css"> #Test1{border:solid 1px red;width:200px;height:200px;} #Test2{border:solid 1px...
复制链接

扫一扫