边界半径；溢出：隐藏，文本不被剪切

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;
}

卡顿：

请注意，它已在新的 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 中测试了这一点（有剪切错误）成功了！

在正确支持边框半径的浏览器中，跨度（及其边框颜色）甚至不可见，因为它被剪掉了（溢出：隐藏）。