使用 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/
感谢您的帮助。
最佳答案
实际上,您提供的代码适用于带有 Blink 引擎的最新 Opera,因此我想您可以保留代码原样。但是,如果您需要它在 12.16 及更高版本中工作并且您的页面背景是白色,您可以做的是将 .png 覆盖在您的图表上,这将裁剪图表,就像网络开发人员在过去没有 边框半径
:)
关于overflow - 最新歌剧在使用 border-radius 属性时不会 overflow hidden ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21044099/