curvycorners控件在chrome 谷歌浏览器下 会产生上下边框变黑色 的情况,解决办法... - Go语言中文社区

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


curvycorners,一个网页Elements圆角的js实现。浏览及使用看这里
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; 。

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

版权声明:本文来源CSDN,感谢博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
原文链接:https://blog.csdn.net/weixin_30631587/article/details/96858521
站方申明:本站部分内容来自社区用户分享,若涉及侵权,请联系站方删除。
  • 发表于 2020-06-28 03:09:32
  • 阅读 ( 1321 )
  • 分类:

0 条评论

请先 登录 后评论

官方社群

GO教程

猜你喜欢