Webkit不尊重overflow：用border radius隐藏 [英] Webkit not respecting overflow:hidden with border radius

问题描述

我有一个可爱的星际迷航红色警报动画使用CSS3。我的父元素之一有 border-radius 以及 overflow：hidden ，以便任何内容被裁剪到形状

I have a lovely Star Trek Red Alert animation using CSS3. One of my parent elements has a border-radius along with overflow:hidden so that any content is cropped to the shape of the border radius.

这一切在Firefox中都可以正常工作，但Webkit浏览器在裁剪区域外面留下一些子元素。

This all works fine in Firefox but Webkit browsers leave some child elements hanging outside the cropped area.

这是我的代码：

http://jsfiddle.net/doublewombat/EqK6R/embedded/result/

div 具有 border-radius 和 overflow：hidden code>。然而， Alert文本的右侧悬挂在此半径之外，即使它们是 curvedEdges 的子元素。或者在纯英语中，动画的左右边缘应该稍微弯曲（如在Firefox中），而不是直线。

The div with the class name curvedEdges has the border-radius and overflow:hidden. However the blocks left & right of the 'Alert' text hang outside of this radius, even though they are child elements of curvedEdges. Or in plain English, the left and right edges of the animation should be slightly curved (as in Firefox), not dead straight.

这是Webkit中的一个错误，

So is this a bug in Webkit, or have I got something wrong?

这里是在YouTube上，如果你没有Webkit浏览器方便...

Here it is on YouTube if you don't have a Webkit browser handy...

http://www.youtube.com/watch?v=3vyVy21nWsE

推荐答案

您可以将一个绝对定位的div放在边框半径和粗黑边框上，

You could put an absolute positioned div over it with a border-radius and a thick black border, it will block the parts you want too be hidden.

我为FF3.6中的类似问题提出了另一个问题的演示： http://jsfiddle.net/vfp3v/15/

I made a demo for another question about a similar problem in FF3.6: http://jsfiddle.net/vfp3v/15/

border-radius; overflow：hidden，且文字未剪裁

这篇关于Webkit不尊重overflow：用border radius隐藏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！