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

Question

I'm trying to style the default progressbar skin of jquery-ui. Unfortunately I've discovered an issue that is known as "background bleeding". Apparently the solution for this problem is to use:

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

However it does not seem to work for me, no matter where I put it. :(

Image of my background bleeding issue (zoomed)

Source:

 $(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

Here is a workaround: I set a smaller border-radius for the inner rectangle (orange bar), to hide the blurry leaking part of the parents (black background) rounded border. I'll mark this question as solved as the workaround is good enough for my purpose. Sadly this issue remains a bug/flaw in CSS.

Edit: Alright, have to wait 2 days before I can actually close it. Please don't delete it again.