[英]How to make CSS3 rounded corners hide overflow in Chrome/Opera
我需要父div上的圆角来掩盖其孩子的内容。 overflow: hidden
在简单的情况下工作,但在父级相对或绝对定位时,基于webkit的浏览器和Opera中断。
这适用于Firefox和IE9:
CSS
#wrapper {
width: 300px;
height: 300px;
border-radius: 100px;
overflow: hidden;
position: absolute;
}
#box {
width: 300px;
height: 300px;
background-color: #cde;
}
HTML
<div id="wrapper">
<div id="box"></div>
</div>
谢谢您的帮助!
更新:导致此问题的错误已在Chrome中修复。 我没有重新测试Opera或Safari。
我找到了解决这个问题的另一种方案 这看起来像WebKit(或可能是Chrome)中的另一个错误,但它确实有效。 您需要做的就是向#wrapper元素添加WebKit CSS Mask 。 您可以使用单个像素的png图像,甚至可以将其包含在CSS中以保存HTTP请求。
#wrapper {
width: 300px; height: 300px;
border-radius: 100px;
overflow: hidden;
position: absolute; /* this breaks the overflow:hidden in Chrome/Opera */
/* this fixes the overflow:hidden in Chrome */
-webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
}
#box {
width: 300px; height: 300px;
background-color: #cde;
}
将z-index添加到border-radius'd项目,它将掩盖其中的内容。
没关系所有人,我设法通过在包装器和盒子之间添加一个额外的div来解决问题。
CSS
#wrapper {
position: absolute;
}
#middle {
border-radius: 100px;
overflow: hidden;
}
#box {
width: 300px; height: 300px;
background-color: #cde;
}
HTML
<div id="wrapper">
<div id="middle">
<div id="box"></div>
</div>
</div>
谢谢大家的帮助!
不透明度:0.99; 在包装器上解决webkit bug
似乎这个工作:
.wrap {
-webkit-transform: translateZ(0);
-webkit-mask-image: -webkit-radial-gradient(circle, white 100%, black 100%);
}
支持最新的chrome,opera和safari,你可以这样做:
-webkit-clip-path: inset(0 0 0 0 round 100px);
clip-path: inset(0 0 0 0 round 100px);
你一定要查看工具http://bennettfeely.com/clippy/ !
不是答案,但这是Chromium来源下提交的错误: http : //code.google.com/p/chromium/issues/detail?id = 62363
不幸的是,看起来并没有人在研究它。 :(
使用边框更改父元素的不透明度,这将重新组织堆叠元素。 经过数小时的研究和尝试失败后,这对我来说奇迹般地起作用。 就像添加0.99的不透明度来重新组织浏览器的绘制过程一样简单。 查看http://philipwalton.com/articles/what-no-one-told-you-about-z-index/
基于graycrow的优秀答案......
这是一个更真实的例子,它有两个带有一些填充内容的cicular div。 我用十六进制值替换了硬编码的png背景,即
-=-webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
被替换为
-webkit-mask-image:#fff;
看到这个JSFiddle ... http://jsfiddle.net/hqLkA/
至于我,没有一个解决方案运作良好,只使用:
-webkit-mask-image: -webkit-radial-gradient(circle, white, black);
在包装元素上完成了这项工作。
这里的例子是: http : //jsfiddle.net/gpawlik/qWdf6/74/
看看我是怎么做到的; 的jsfiddle
通过我提供的代码,我设法让它在Webkit(Chrome / Safari)和Firefox上运行。
我不知道它是否适用于最新版本的Opera。
是的,它可以在最新版本的Opera下运行。
#wrapper {
width: 300px; height: 300px;
border-radius: 100px;
overflow: hidden;
position: absolute; /* this breaks the overflow:hidden in Chrome/Opera */
}
#box {
width: 300px; height: 300px;
background-color: #cde;
border-radius: 100px;
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
-o-border-radius: 100px;
}
如果要为图像创建蒙版并将图像放置在容器内,请不要设置“position:absolute”属性。 您所要做的就是更改margin-left和margin-right。 Chrome / Opera将遵循溢出:隐藏和边界半径规则。
// Breaks in Chrome/Opera.
.container {
overflow: hidden;
border-radius: 50%;
img {
position: absolute;
left: 20px;
right: 20px;
}
}
// Works in Chrome/Opera.
.container {
overflow: hidden;
border-radius: 50%;
img {
margin-left: 20px;
margin-right: 20px;
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.