html - コードでバックグラウンド クリップが機能しません。(Border-Radius/背景のにじみの問題)

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>