1. 首页
  2. 问答
  3. 如何使CSS3圆角在Chrome/Opera中隐藏溢出

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

2011-04-20 167 views
138

我需要父div上的圆角来掩盖其子类中的内容。 overflow: hidden适用于简单的情况，但在父母相对或绝对位置时，基于webkit的浏览器和Opera会中断。如何使CSS3圆角在Chrome/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。

来源

2011-04-20 jmotes

回答

53

没有想到每个人，我设法通过在包装和盒子之间添加额外的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/

来源

2011-04-21 15:12:57 jmotes

+12

这适用，因为定位元素不会将其内容剪辑到Webkit中的边框半径。这个额外的层简单地使它与边界半径的div没有定位，并且简单地坐在定位元素内。 – 2011-06-21 00:28:20

+9

你会偶然知道这是一个错误/预期的行为？ – jmotes 2011-06-21 19:01:26

+4

+1投票给bug ...当你有一个自动生成div并将位置设置为绝对的图像库时，那么这个“特性”确实是sux ... – inf3rno 2012-08-31 14:19:28

1

这里看看我是如何做到的; 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; 
}

来源

2011-04-21 10:34:16 Maze

+0

为什么在这种情况下把'border-radius'放在包装器上，你只需在'＃box'上设置就可以得到相同的结果。另外，如果'＃box'边框半径仅用于修复WebKit，则可以在其中包含'-webkit-'属性。 – robertc 2011-04-21 12:25:46

+0

迷宫，这可能在某些情况下工作，但在我的情况下，我正在寻找一个解决方案，不转换框的形状（和包装仍然作为面具）。我的例子非常简单，但我试图用包装来隐藏盒子中的阴影（使用包装上的填充来仅使我想要的阴影边缘可见）。 – jmotes 2011-04-21 14:42:43

+1

感谢您的帮助，虽然迷宫！你的解决方案帮助我更批判地考虑这个问题。顺便说一句，你可以忽略我对你的帖子所做的修改。我的意思是让它成为我自己的。对不起:) – jmotes 2011-04-21 15:09:57

172

我发现这个问题的另一种解决方案。这看起来像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; 
}​

JSFiddle Example

来源

2012-04-24 10:37:13 graycrow

+0

出现了这个问题。感谢您的修复，感谢 – Nasir 2012-07-02 14:32:44

+3

感谢您的修复。今天在safari试用了它（v6.0.2），并在那里为我工作！ – billythetalented 2012-11-22 13:29:18

+0

也适用于Safari 6.0.2中的我 – eveevans 2013-01-04 18:02:38

2

基于graycrow的出色答卷......

下面是与一些填料含量。我更换了硬编码的PNG背景，只是一个十六进制值，即，两个cicular的div一个更真实的例子

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

被替换

-webkit-mask-image:#fff;

看到这个的jsfiddle ... http://jsfiddle.net/hqLkA/

来源

2013-11-18 06:15:09 gts101

2

对我来说没有任何解决方案的效果很好，只能用：

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

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

这里的例子：http://jsfiddle.net/gpawlik/qWdf6/74/

来源

2014-03-09 13:48:03

14

似乎这一个工程：

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

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

来源

2014-05-19 10:35:01 nakrill

+0

这为我解决了，谢谢！ – Elyx0 2014-06-05 12:52:39

+0

比例帮助，谢谢你！ – 2015-05-29 20:58:17

+4

'transform：translateZ（0）'对我来说已经足够了。 – Kalvn 2015-12-13 10:47:39

93

添加的z-index到您的边界radius'd项，它会掩盖事情在里面。

来源

2014-08-08 14:37:49 Jackolai

+3

这一个实际上为我工作。 – CamaroSS 2014-10-27 08:11:35

+0

@Sifu：你错了。无论出于何种原因，按照建议添加z-index解决了这个问题（在当前版本的Chrome中），这是比顶级答案更简单，更通用的解决方案。 – 2014-11-19 09:38:25

+0

不适合我.... – simon 2015-04-19 04:42:43

0

如果您正在寻找为图像创建一个遮罩并将图像放置在容器内，请不要设置'position：absolute'属性。你所要做的就是改变余量和余量。 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; 
     } 
    }

来源

2016-03-09 14:36:47 user6039997

16

不透明度：0.99;包装上的WebKit解决错误

来源

2016-06-03 12:22:43 flavi1

+1

'transform：translateY（0）;'是一种替代方案在不干扰对象的视觉表示的情况下达到相同的结果（除非您使用透视图）。 – kontur 2017-07-05 12:09:13

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/！

来源

2016-11-26 14:30:07 antoni

相关问题

 相关问题