CSS/HTML/any 替代边界半径或 overflow:hidden？

Question

我目前正在进行一个项目，该项目涉及一个圆圈，该圆圈随机填充颜色到某个点。我使用带边框半径的 div 来创建圆 + overflow:hidden 和另一个 div 来模仿 'filling'.

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 不是 'thing' 但我还是试过了......一个人总是可以梦想 :^)

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

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

Answer 1

CSS 剪辑路径属性允许您指定一个 SVG 形状用作 HTML 内容的遮罩；这可能是向前推进的规范方式。

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

或者，如果圆圈的内容只是一张图片，而不是交互式的，您可以使用 canvas 渲染整个内容。即使是很老的浏览器也应该处理这个问题，CanvasRenderingContext2D 知道如何将绘图剪裁成一个形状。

Answer 2

如果圆圈像您的示例一样在纯色背景下，您可以创建一个具有相同颜色背景的 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 中遇到问题。

Answer 3

这有点摸不着头脑，因为我不知道所需的 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/

祝你好运。

CSS/HTML/any 替代边界半径或 overflow:hidden？

CSS/HTML/any alternatives to border-radius OR overflow:hidden?

html

css

opera