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

Posted

技术标签:

【中文标题】如何使 CSS3 圆角在 Chrome/Opera 中隐藏溢出【英文标题】:How to make CSS3 rounded corners hide overflow in Chrome/Opera 【发布时间】:2011-08-09 20:09:33 【问题描述】:

我需要父 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>

Example on JSFiddle

感谢您的帮助!

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

【问题讨论】:

【参考方案1】:

我为这个问题找到了另一种解决方案。这看起来像是 WebKit(或者可能是 Chrome)中的另一个错误,但它确实有效。您需要做的就是将WebKit CSS Mask 添加到#wrapper 元素。您可以使用单像素 png 图像,甚至可以将其包含到 CSS 中以保存 HTTP 请求。

#wrapper 
    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 */


#box 
    width: 300px; height: 300px;
    background-color: #cde;
<div id="wrapper">
    <div id="box"></div>
</div>

【讨论】:

感谢您的修复。今天在 safari (v6.0.2) 中试用了它并在那里为我工作! 这将打破元素上的任何阴影。 这也适用于具有绝对定位子元素的包装器,而此处的其他解决方案则不能。不错! 使用 Chrome 42.0.2311.90(64 位),并且此修复仍然需要...谢谢! 您的解决方案移除了父元素的阴影。【参考方案2】:

为你的边框半径项目添加一个 z-index,它会掩盖它里面的东西。

【讨论】:

@Sifu:你完全错了。无论出于何种原因,按照建议添加 z-index 为我解决了这个确切的问题(在当前版本的 Chrome 中),这是一个比最佳答案更简单、更通用的解决方案。 @simon: 请记住,要使 z-index 生效,需要满足某些条件(例如,需要设置位置)。详情请见here。 @NickF -- 这是 Chrome(-ium) 中的一个错误; -webkit-mask-image: -webkit-radial-gradient(circle, white, black); 是一种有效的解决方法,但幸运的是,该错误已在我收到的 Chrome 最新更新中得到修复。 z-index 1 到容器。 z-index -1 到绝对元素为我解决了这个问题。 2021,这个bug依然存在(Safari version 14.0.3 (16610.4.3.1.4) Desktop)【参考方案3】:

没关系,我设法通过在包装器和盒子之间添加一个额外的 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>

感谢所有帮助过的人!

→http://jsfiddle.net/5fwjp/

【讨论】:

这是可行的,因为定位的元素不会将它们的内容裁剪到它们在 Webkit 中的边界半径。这个额外的层只是使具有边界半径的 div 没有被定位,而只是位于定位的元素内。 您是否会偶然知道这是否是错误/预期行为? +1 投票给错误...当您有一个自动生成 div 并将位置设置为绝对位置的图片库时,那么这个“功能”真的很不错... @RunLoop 我刚刚在 Safari 7.1 中测试了 jsfiddle 并且工作正常。您能否更具体地说明什么不起作用? 我们的平面设计师同事实际上在找到这个答案之前的 20 秒“发现”了:D【参考方案4】:

不透明度:0.99;关于 wrapper 解决 webkit 的 bug

【讨论】:

transform: translateY(0); 是一种替代方法,它可以在不干扰对象的视觉表示的情况下达到相同的结果(除非您使用透视)。【参考方案5】:

看来这个可行:

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

http://jsfiddle.net/qWdf6/82/

【讨论】:

transform: translateZ(0) 对我来说已经足够了。 请注意,这(特别是translateZ)会隐式地为您的元素启用硬件加速,遗憾的是,在某些情况下这会打开一个全新的蠕虫罐。 transform: translateZ(0) 也为我工作。在我的情况下,这个项目是硬件加速的不是一个坏主意。【参考方案6】:

在最新的 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/这个工具!

【讨论】:

我认为你可以进一步缩短它 clip-path: inset(0%); ... 只是有一个剪辑路径似乎就可以了 :-) 哇。这是完美的答案。【参考方案7】:

不是答案,但这是 Chromium 源下的一个归档错误: http://code.google.com/p/chromium/issues/detail?id=62363

不幸的是,看起来没有人在研究它。 :(

【讨论】:

3年过去了还没有修好>. 【参考方案8】:

用边框改变父元素的不透明度,这将重新组织堆叠的元素。经过数小时的研究和失败的尝试,这对我来说奇迹般地奏效了。就像添加 0.99 的不透明度来重新组织浏览器的绘制过程一样简单。查看http://philipwalton.com/articles/what-no-one-told-you-about-z-index/

【讨论】:

【参考方案9】:

就我而言,没有一个解决方案效果很好,只使用:

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

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

这里是示例:http://jsfiddle.net/gpawlik/qWdf6/74/

【讨论】:

【参考方案10】:

基于 graycrow 的出色回答...

这是一个更真实的示例,它有两个带有一些填充内容的圆形 div。我只用一个十六进制值替换了硬编码的 png 背景,即

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

替换为

-webkit-mask-image:#fff;

查看这个 JSFiddle...http://jsfiddle.net/hqLkA/

【讨论】:

【参考方案11】:

这里看看我是怎么做到的; 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;

【讨论】:

在这种情况下,为什么还要将border-radius 放在包装器上,只需将其设置在#box 上就会得到相同的结果。此外,如果 #box 边框半径只是为了修复 WebKit,您可以在其中包含 -webkit- 属性。 迷宫,这在某些情况下可能会起作用,但在我的情况下,我正在寻找一种不会改变盒子形状的解决方案(并且包装器仍然可以用作遮罩)。我的示例非常简化,但我正在尝试使用包装器从盒子中隐藏阴影(使用包装器上的填充以仅使我想要的阴影边缘可见)。 感谢迷宫的帮助!您的解决方案帮助我更批判地思考问题。顺便说一句,您可以忽略我对您的帖子所做的编辑。我本来打算自己做的。对不起:) @user480837 没问题,伙计,很高兴我能帮上忙。 :) @Maze 如果应用任何类型的边框,这将不起作用:jsfiddle.net/ptW85/228【参考方案12】:

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

【讨论】:

以上是关于如何使 CSS3 圆角在 Chrome/Opera 中隐藏溢出的主要内容,如果未能解决你的问题,请参考以下文章

如何在 chrome、safari、opera 等 webkit 浏览器中删除 c fakepath?

css圆角边框代码,css3中div圆角边框是怎么写的

如何解决IE8浏览器不兼容CSS3圆角边框问题?(实用篇)

css圆角边框代码,css3中div圆角边框是怎么写的

css圆角矩形的制作

CSS3圆角详解第一辑