CSS/HTML/border-radius 的任何替代方案或溢出：隐藏？答案

【问题标题】：CSS/HTML/any alternatives to border-radius OR overflow:hidden?CSS/HTML/border-radius 的任何替代方案或溢出：隐藏？
【发布时间】：2015-01-08 12:45:45
【问题描述】：

我目前正在做一个项目，该项目涉及一个圆圈被随机填充到某个点的颜色。我使用了一个带有边框半径的 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 不是一个“东西”，但我还是尝试过...一个人总是可以梦想 :^)

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

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

【问题讨论】：

Opera 到底是什么版本？
@NicoO 他们无法说出集成在显示器中的实际版本，但我认为这是在他们修复此错误之前。目前在我的计算机上使用 11.6 进行测试，但仍然存在错误。
caniuse 建议
@sodawillow 这个？如果您想链接某些东西，我认为您忘记了链接本身：p
抱歉……走得太快了：stackoverflow.com/questions/13304688/…

标签： html css opera

【解决方案1】：

这有点像在黑暗中拍摄，因为我不知道所需的歌剧版本。但是你可以尝试使用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/

祝你好运。

【讨论】：

感谢您抽出宝贵时间提供帮助！但是，您提供的小提琴似乎不适用于我的 11.6 版 PC 上的歌剧浏览器。（不显示渐变）但它确实适用于 chrome（最新版本）
@JJGrootveld 我没有在 jsfiddle 中添加任何前缀。你应该寻找前缀-o- 这里是演示：jsfiddle.net/05dkfoxj/6
很抱歉，您发布的更新小提琴仍然没有显示动作。
@JJGrootveld 在opera_jsfiddle.net/05dkfoxj/7 中检查这个 - 你也应该在你的实现中检查这个。可能 JsFiddle 也不支持浏览器版本。
哦，这行得通！有什么方法可以平滑动画还是我要求太多？哈哈

【解决方案2】：

CSS clip-path 属性允许您指定一个 SVG 形状以用作 HTML 内容的掩码；这可能是实现这一目标的规范方式。

我假设您使用的 Opera 版本太旧，无法支持此属性，或者可能以非 hacky 方式执行您想要的任何其他内容。如果圆圈位于纯色背景上，您可以叠加一个相同颜色的不透明蒙版，即剪下一个圆圈的 PNG。更有野心的是，您也许可以使用 this technique 之类的东西在画布上动态生成图像，这（如果可行的话）将允许非纯色背景。但是，这会很复杂，而且如果涉及的任何元素都需要响应指针事件，则可能不可行。

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

【讨论】：

【解决方案3】：

如果圆形是在您的示例中的纯色背景上，您可以创建一个具有相同颜色背景的 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 */
}

我总是倾向于做这种事情，因为我知道它会起作用，即使我更愿意按照你的方式去做。如果您支持旧版本的 IE，使用边框半径会遇到问题。

【讨论】：