Background-clip在我的代码中不起作用。 （边界半径/背景出血问题）

Question

我正在尝试设置jquery-ui的默认进度栏皮肤的样式。 不幸的是，我发现了一个称为“背景出血”的问题。 显然，此问题的解决方案是使用：

-moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box;

但是，无论放在哪里，它似乎都不适合我。 :(

我的背景出血问题的图像（已缩放）

资源：

 $(function() { var myProgressBar = $("#myProgressBar"); myProgressBar.progressbar({ value: 50 }); }); 

 #myProgressBar { width: 580px; height: 92px; border: none; /* black background */ background-color: black; background-image: linear-gradient(rgba(255, 255, 255, 0.25) 50%, transparent 50%, transparent); } #myProgressBar .ui-widget-header { /* orange foreground */ background-color: orange; background-image: linear-gradient(rgba(255, 255, 255, 0.2) 50%, transparent 50%, transparent); } 

 <link type="text/css" rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/smoothness/jquery-ui.css"/> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script> <div id="myProgressBar"></div> 

Answer 1

这是一种解决方法：我为内部矩形（橙色条）设置了较小的边框半径，以隐藏父母（黑色背景）圆形边框的模糊泄漏部分。 我将这个问题标记为已解决，因为该解决方法足以满足我的目的。 遗憾的是，此问题仍然是CSS中的错误/缺陷。

编辑：好的，必须等2天才能真正关闭它。 请不要再次删除它。