我目前正在进行一个项目,其中涉及一个圆圈随机填充一种颜色到某一点。我使用了一个带边框半径的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不支持边界半径+溢出:隐藏+位置:相对/绝对的组合
PS:我知道-o-边界半径不是一个“东西”,但我试过它不是没有。。。一个人总有梦想:^)
我一直在想办法,但我没主意了。
我希望这个美好的社区能帮助我:)

最佳答案

这有点像在黑暗中拍摄,因为我不知道需要什么版本的歌剧。但您可以尝试使用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/
祝你好运。

关于html - CSS/HTML/边界半径或溢出的任何替代方法:隐藏?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/27840465/

10-10 18:15
查看更多