CSS / HTML / border-radius的任何替代方法OR overflow:hidden?

时间:2015-01-08 12:45:45

标签: html css css3 opera

我目前正在开展一个项目,该项目涉及一个圆圈随机填充某一点的颜色。我使用了一个带有border-radius的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
    }

我的浏览器非常棒,但是我必须让它在一个过时的Opera浏览器上工作,这个浏览器集成到智能显示器中(实际上是不可更新的)。

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

PS:我知道-o-border-radius不是&#39;&#39;但我试过了......一个男人总能梦想:^)

我一直试图找到解决方案,但我没有想法。

我希望这个精彩的社区可以帮助我:)

3 个答案:

答案 0 :(得分:2)

这是一个黑暗中的镜头,因为我不知道所需的歌剧版本。但您可以尝试使用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/

祝你好运。

答案 1 :(得分:0)

CSS clip-path属性允许您指定SVG形状以用作HTML内容的掩码;这可能是向前迈进的规范方式。

我认为您使用的Opera版本太旧而无法支持此属性,或者可能是以非hacky方式执行您想要的任何其他操作。如果圆圈位于纯色背景上,则可以叠加相同颜色的不透明蒙版,即从中剪切出圆圈的PNG。更加雄心勃勃的是,您可以使用类似this technique之类的东西在画布上动态生成图像,如果它有效,它将允许非实体背景。但这很复杂,如果涉及的任何元素需要响应指针事件,则可能不可行。

或者,如果圆圈的内容只是一张图片而非交互式,您可以使用画布渲染整个图片。即使很老的浏览器也应该处理它,CanvasRenderingContext2D知道如何将绘图剪辑成形状。

答案 2 :(得分:0)

如果圆圈与示例中的实心背景相对,则可以创建具有相同颜色背景的PNG或SVG,并将圆形切出并将其用作叠加层。删除.circle元素并将图像放在.circlediv中。它应该给你与你拥有的效果相同的效果。

.circlediv
{
    width: (image width) 
    height: (image height) 
    postition: relative;
}

svg, png
{ 
   z-index: 2;
   width: 100%;
   height: 100%;
   position: absolute;
   /* rest of your styling */
}

#animateddiv1
{
    z-index:1;
    position: absolute;
    bottom:0;
    width:100%;
   /* rest of your styling */
}

我总是倾向于这样做,因为我知道它会起作用,即使我喜欢按照你的方式去做。如果你支持使用border-radius,那么你在旧版本的IE中会遇到问题。