Question

如果position:relative;

，圆角无法切断webkit浏览器（例如Chrome）中的内容

请参阅此demo。

HTML：

<div class="outer">
    <div class="inner">
    </div>
<div>

CSS：

.outer {
    background:yellow;
    border:solid 1px black;
    position:relative;/* Setting this means rounded corners don't cut off content! */
    overflow:hidden;

    -moz-border-radius: 12px;
    border-radius: 12px;   
}
.inner {
    background:red;
    height:50px;
}

任何人都知道修复？谢谢 -

Answer 1

http://jsfiddle.net/USd5s/

讨厌添加额外的dom元素，但是一个简单的包装器可以解决这个问题。您不必使用我选择的元素或css方法，span和合格的css只是我的口味。或者其他东西也会起作用。

Answer 2

您可以强制它在3d中使用：

进行渲染

-webkit-transform: translateZ(0);   
-moz-transform: translateZ(0);   
transform: translateZ(0);

Answer 3

只需将内部设置为与外部相同的边框半径。

.inner {
    -moz-border-radius: inherit;
    -webkit-border-radius: inherit;
    border-radius: inherit;
}

哦，不要忘记webkit人。：

Answer 4

我在项目中遇到了同样的问题，并通过CSS中的一点变化来解决它

而不是将位置设置为相对我将其设置为继承：

.outer {
    background:yellow;
    border: solid 1px black;
    position: inherit;
    overflow:hidden;
    border-radius: 12px;   
}

这完全解决了这个问题。

Answer 5

您可以为内部div指定相同的border-radius：http://jsfiddle.net/eCsA3/8/

<div class="outer">
    <div class="inner">
    </div>
<div>

<style type="text/css">
.outer {
    background:yellow;
    border:solid 1px black;
    position:relative;/* Setting this means rounded corners don't cut off content! */
    overflow:hidden;

    -moz-border-radius: 12px;
    border-radius: 12px;   
}
.inner {
    background:red;
    height:50px;
    -moz-border-radius: 12px;
    border-radius: 12px;   
}
</style>

Answer 6

我相信我在某处读到你必须将容器夹到某个东西才能解决这个问题。我不太确定，但我认为这是要走的路。

Answer 7

正如保罗·赛义德，webkit中的Bug，但你仍然可以利用内部div上的边距来解决它。

Answer 8

请参阅此link。这解决了您的问题。

＆＃13;

#wrapper {
    margin-top:250px;
    width: 300px; 
    height: 300px;
    border-radius: 100px;
    overflow: hidden;
    position: absolute; /* this breaks the overflow:hidden in Chrome/Opera */
    -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC); /* this fixes the overflow:hidden in Chrome/Opera */
}

＆＃13;

Answer 9

尝试将其作为.inner的CSS：

.inner {
    background: red;
    height: 50px;
    position: absolute;
    top: 1px;
    left: 12px;
    right: 12px;
    bottom: 1px;
}

您需要调整bottom和top才能获得正确的身高。如果保持不变，则该类只有一个像素的高度。此方法将左边距和右边距设置为边框半径，因此边缘不会出现任何内容。

或者，如果您在.outer周围有纯色背景，则可以制作如下图像： Rounded Corner PNG 其中内部区域（图像中的方格区域）是透明的，外部区域是背景颜色。然后使用边框图像或绝对定位将其放置在角落所在的位置。给它一个高z-index。滚动时，内容将隐藏在角落的填充部分下方。

如果position：relative，圆角不能切断webkit浏览器中的内容

9 个答案: