overflow - 最新歌剧在使用 border-radius 属性时不会 overflow hidden

Question

使用 border-radius Opera 实际上不会隐藏元素的溢出部分。我已经尝试应用我设法在类似线程中找到的东西，例如定义边框样式或注意使用绝对和相对参数进行定位。但它仍然无法正常工作。

html

<div class="node">
    <div class="skill skill1"></div>
    <div class="skill skill2"></div>
    <div class="skill skill3"></div>
    <div class="skill skill4"></div>
</div>

CSS

.node {
    position: relative;
    width: 250px;
    height: 250px;
    opacity: 0.9;
    border-radius: 50%;
    overflow: hidden;
    left: -60px;
    border: solid 1px transparent;
}

.skill {
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    height: 50%;
    transform-origin: 100% 100%;
    -webkit-transform-origin: 100% 100%;
}

.skill1 {
    background-color: #26ac79;
    -webkit-transform: rotate(90deg) skewX(45deg);
    transform: rotate(90deg) skewX(45deg);
}

.skill2 {
    background-color: #25765f;
    -webkit-transform: rotate(135deg) skewX(45deg);
    transform: rotate(135deg) skewX(45deg);
}  

.skill3 {
    background-color: #25313f;
    -webkit-transform: rotate(180deg) skewX(45deg);
    transform: rotate(180deg) skewX(45deg);
}

.skill4 {
    background-color: #25193d;
    -webkit-transform: rotate(225deg) skewX(45deg);
    transform: rotate(225deg) skewX(45deg);
}

这是 fiddle : http://jsfiddle.net/Mu9Ar/

感谢您的帮助。

Answer 1

实际上，您提供的代码适用于带有 Blink 引擎的最新 Opera，因此我想您可以保留代码原样。但是，如果您需要它在 12.16 及更高版本中工作并且您的页面背景是白色，您可以做的是将 .png 覆盖在您的图表上，这将裁剪图表，就像网络开发人员在过去没有 边框半径:)