Chrome Box-Shadow display error in combination with border-radius

问题:

http://jsfiddle.net/54tLcje5/

HTML: <div id="layer_content_wrapper"> </div>  CSS: body {     background-color: black; }  #layer_content_wrapper {     position: absolute;     z-index: 100;     width: 300px;     height: 300px;     background-color: rgba(0, 0, 0, 0.7);     background-color: white;     left: 50%;     margin-left: -150px;     top: 60px;     -webkit-border-radius: 150px;     -webkit-box-shadow: 0px 0px 300px 100px red; } 

Is there a workaround? Am I doing something wrong?

The display error did not occur rughly 3 Months ago...it has to have something to do with something which has changed in chrome. I had a page running for almost 2 years with this box-shadow until the error came up.

Thank you...

回答1:

try using this css:

-webkit-box-shadow: 0px 0px 140px 100px rgba(255, 0, 0, 0.6) !important; 

where horizontal and vertical length is 0px, Blur radius from 300px to 140px, spear radius 100px and color rgba (with alpha channel to 0.6) for tricks the problem on chrome and have the same result like other browser

you can use this for cross browser:

-webkit-box-shadow: 0px 0px 140px 100px rgba(255,0,0,0.6); -moz-box-shadow: 0px 0px 140px 100px rgba(255,0,0,0.6); box-shadow: 0px 0px 140px 100px rgba(255,0,0,0.6); 

文章来源: Chrome Box-Shadow display error in combination with border-radius