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

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天才能真正关闭它。请不要再删除它。