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

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（有剪辑错误）中测试了它，它工作了！

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