html - CSS/HTML/边框半径或溢出的任何替代方案 :hidden?

Question

我目前正在从事一个元素，该元素涉及一个圆圈，该圆圈随机填充某种颜色到某个点。我使用带有边框半径的 div 来创建圆 + overflow:hidden 和另一个 div 来模仿“填充”。

See JSFiddle

HTML:

<div class="circleswrap">           

    <div class="circlediv">
        <div class="circle">
            <div id="animateddiv1">                         
            </div>      
        </div>
    </div>      
</div>

CSS:

    .circle {
            position: relative;
            border-radius: 50%;
            -o-border-radius: 50%;
            overflow: hidden;
            background: #8a8a8a;
            width: 165px;
            height: 165px;
            display: inline-block;
            margin: 0 75px;.
    }

    #animateddiv1 {
            background: #63B23A;
            position: absolute;
            top: 130px;
            width: 200px;
            height: 165px
    }

Awesome 在我的浏览器中运行良好，但我必须让它在集成到智能显示器中的过时 Opera 浏览器上运行(并且几乎不可更新)。

众所周知，旧版本的 Opera 不支持 border-radius + overflow:hidden + position: relative/absolute 的组合

PS:我知道 -o-border-radius 不是一个“东西”，但我还是尝试了它......一个人总是可以梦想 :^)

我一直在努力寻找解决方案，但我没有主意。

我希望这个很棒的社区可以帮助我 :)

Answer 1

这有点摸不着头脑，因为我不知道所需的 Opera 版本。但是你可以尝试使用 background-image: linear-gradient();

像这样:

setInterval(function () {
    var percentage = Math.floor(Math.random() * 100);
    $(".circle").css("background-image", 'linear-gradient( 0deg, #63B23A ' + percentage + '%, #8a8a8a ' + percentage + '%' + ' )')
}, 3000);

This seems to be supported from Opera 11.1

当然不要忘记浏览器前缀-o-

所以代码可能是这样的:

setInterval(function () {
    var percentage = Math.floor(Math.random() * 100);
    $(".circle").css("background-image", '-o-linear-gradient( 0deg, #63B23A ' + percentage + '%, #8a8a8a ' + percentage + '%' + ' )')
}, 3000);

这是一个演示:http://jsfiddle.net/05dkfoxj/2/

祝你好运。