Webkit 不考虑溢出:用边框半径隐藏 [英] 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/

类名为 curvedEdges 的 div 具有 border-radius 和 overflow:hidden.然而，块离开 &警报"文本的右侧挂在此半径之外，即使它们是 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?

如果您手边没有 Webkit 浏览器，它就在 YouTube 上...

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/

border-radius;溢出:隐藏，文本不被剪裁

这篇关于Webkit 不考虑溢出:用边框半径隐藏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！