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

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