边界半径;溢出：隐藏，文本不被剪裁

Question

我在圆形div中做了一些文体，文本在容器顶部碰到了。我已经能够控制几乎所有的内容，嵌套的div，设置为背景的图像等，并将它们全部剪辑成功，但这一次给了我严重的悲伤。

使用旧式图像边框或掩盖不是解决方案，因为我们拥有动态图形背景。我们需要一个实际剪辑文本的解决方案。

这主要在 Firefox 3.x 及旧版 Chrome

中可见

以下是要使用的示例代码：

http://jsfiddle.net/vfp3v/1/

div {
    -moz-border-radius: 45px;
    border-radius: 45px;
    background-color: #ccc;
    font-size: 100px;
    color: #777;
    line-height: 70%;
    overflow: hidden;
    width: 257px;
}

jank：

请注意，它已在新的Chrome和FireFox 4中修复 - shui：

我们的大多数网站用户都是Firefox 3.6，所以我们也希望能够为他们提供优雅的解决方案。任何帮助赞赏！干杯

Answer 1

这个适用于FF 3.6：http://jsfiddle.net/vfp3v/15/

它有一些缺点，正如您在第二个示例中所看到的（在FF 3.6中），剪裁的边框具有纯色，因此如果您使用某种背景，这可能看起来很难看。只需看看它，它可能符合您的需求。

我刚刚添加了一个范围：

<div><span></span>WXYZ</div>

然后将其放在文本上，边框与背景颜色相同，位移与边框一样大：

div{
    position:relative;
    etc...
}
span{ 
    position:absolute; display:block; width:100%; height:100%;
    border:25px solid #fff; top:-25px; left:-25px;
    -moz-border-radius: 70px; border-radius: 70px; /* 45 radius + 25 border */       
}

编辑：刚刚在chrome 10.0.6中测试了这个（它有剪辑错误）并且它有效！

在正确支持border-radius的浏览器中，span（及其border-color）甚至不可见，因为它被剪掉（溢出：隐藏）。