Html 如何在Chrome/Opera中隐藏CSS3圆角溢出

我需要在父div上使用圆角来屏蔽子div的内容<代码>溢出：隐藏的在简单的情况下工作，但在基于webkit的浏览器和Opera中，当父级相对或绝对定位时会中断

这适用于Firefox和IE9：

CSS

HTML

谢谢你的帮助

---

更新：导致此问题的错误已在Chrome中修复。不过，我没有重新测试Opera或Safari。

看看我是如何做到的

通过我输入的代码，我成功地使它在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;
}

---

不管是谁，我设法解决了这个问题，在包装器和盒子之间添加了一个额外的div

CSS

HTML

谢谢所有帮助过我的人

---

→

我找到了解决这个问题的另一个方法。这看起来像WebKit（或者可能是Chrome）中的另一个bug，但它可以工作。您只需向#wrapper元素添加一个。您可以使用单像素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;
}​

---

不是答案，但这是铬源下的一个归档错误：

---

不幸的是，看起来没有人在做这件事（

基于格雷克罗的优秀答案

这里有一个更真实的例子，有两个圆形div和一些填充内容

-=-webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);

被替换为

-webkit-mask-image:#fff;

---

查看此JSFIDLE…

对于我来说，没有一个解决方案运行良好，仅使用：

-webkit-mask-image: -webkit-radial-gradient(circle, white, black);

在包装器元素上完成了这项工作

这里的例子是：

这一个似乎有效：

.wrap {
    -webkit-transform: translateZ(0);
    -webkit-mask-image: -webkit-radial-gradient(circle, white 100%, black 100%);
}

---

将z索引添加到边框半径的项目中，它将屏蔽其中的内容。

使用边框更改父元素的不透明度，这将重新组织堆叠的元素。这对我来说是奇迹般的工作，经过数小时的研究和失败的尝试。只需添加0.99的不透明度即可重新组织浏览器的绘制过程。请查看

如果要为图像创建遮罩并将图像放置在容器中，请不要设置“位置：绝对”属性。您所要做的就是更改左边距和右边距。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;
        }
    }

---

不透明度：0.99；在解决最新chrome、opera和safari支持的webkit bug时，您可以执行以下操作：

-webkit-clip-path: inset(0 0 0 0 round 100px);
clip-path: inset(0 0 0 0 round 100px);

---

---

你一定要看看这个工具！

为什么要麻烦把

边框半径

放在包装器上呢？在这种情况下，你只要把它设置在

#box

上就可以得到同样的结果。而且，如果

#box

边框半径只是为了修复WebKit，你可以在那里包含

-WebKit-

属性。梅兹，这个might在某些情况下可以工作，但在我的例子中，我正在寻找一种不改变长方体形状的解决方案（包装仍然可以用作遮罩）。我的示例非常简单，但我尝试使用包装来隐藏长方体的dropshadow（使用包装上的填充使我想要的阴影边缘可见）。谢谢你的帮助！你的解决方案帮助我更批判性地思考了这个问题。顺便说一句，你可以忽略我对你的帖子所做的编辑。我本打算自己编辑。抱歉：）@user480837没问题，伙计，很高兴我能帮上忙。：）@如果应用任何类型的边框，迷宫都不会工作：这是因为定位元素不会将其内容剪裁到Webkit中的边框半径。这个额外的层只是使具有边界半径的div不被定位，而只是位于一个定位的元素内。你会碰巧知道这是否是一个bug/预期行为吗？+1投票给bug。。。当您有一个自动生成div并将位置设置为绝对的图像库时，这个“功能”实际上是sux…@RunLoop我刚刚在Safari 7.1中测试了JSFIDLE，效果很好。你能更具体地说什么不起作用吗？我们的同事，平面设计师，在找到这个答案之前20秒实际上“发现”了这个问题：谢谢你的修复。今天在safari（v6.0.2）中试用了它，并在那里为我工作！但是，这将打破元素上的任何阴影。这也适用于具有绝对定位子元素的包装器，而这里的其他解决方案则不适用。美好的使用Chrome 42.0.2311.90（64位），并且仍然需要此修复。。。谢谢您的解决方案消除了父元素的阴影。@Sifu:您完全错了。不管出于什么原因，按照建议添加z索引解决了我的这个问题（在当前的Chrome版本中），这是一个比最上面的答案更简单、更普遍的解决方案。@simon:记住，要使z索引产生效果，需要满足某些条件（例如，需要设置位置）。有关详细信息，请参阅。@NickF——这是Chrome（-ium）中的一个bug<代码>-webkit遮罩图像：-webkit径向渐变（圆形、白色、黑色）是一个有效的解决方法，但是，谢天谢地，我在最近收到的Chrome.z-index 1到容器的更新中修复了这个错误。z-index-1 to absolute element为我解决了这个问题。2021年，这个错误仍然存在（Safari版本14.0.3（16610.4.3.1.4）桌面），3年后它仍然没有被修复>

transform:translateZ（0）

对我来说就足够了。请注意，这（特别是

translateZ

）将隐式地为元素启用硬件加速，不幸的是，在某些情况下，这打开了一个全新的蠕虫罐。

transform:translateZ（0）

也对我有用。在我的情况下，这是一个不错的主意，这个项目是硬件加速。

transform:translateY（0）

是一种替代方法，可以在不干扰对象的视觉表示的情况下获得相同的结果（除非使用pe）

-webkit-mask-image: -webkit-radial-gradient(circle, white, black);

.wrap {
    -webkit-transform: translateZ(0);
    -webkit-mask-image: -webkit-radial-gradient(circle, white 100%, black 100%);
}

// 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;
        }
    }

-webkit-clip-path: inset(0 0 0 0 round 100px);
clip-path: inset(0 0 0 0 round 100px);