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

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

由于我们有动态的图形背景，使用老式的图像边框或遮盖物不是一个解决方案。我们需要一个实际剪辑文本的解决方案

这在Firefox 3.x和更早版本的Chrome浏览器中都可以看到

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

jank：

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

---

我们网站的大多数用户都是Firefox 3.6，所以我们希望能够为他们提供一个优雅的解决方案。感谢您的帮助！干杯

这一款适用于FF 3.6：

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

我刚刚添加了一个跨度：

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

编辑：刚刚在Chrome10.0.6中测试了这一点（有剪辑错误），它成功了

---

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

woah。。。这似乎是一项相当艰巨的任务……祝你好运，lolImage不会工作，因为文本是从博客文章标题生成的。有趣的方法，尽管不是我们需要的。我们有需要显示的高度动态的背景图像，以及所有UI元素的圆角。这确实是这个解决方案唯一的大缺点。对于背景图像，我想不出任何好的解决方案，我想你总是会用一种方法来覆盖应该隐藏的部分。或者只是添加足够的填充，这样就不需要剪裁了……作为一般信息，我们当前的部分“解决方案”是将文本的alpha透明度设置为20%，这样文本剪裁就不那么明显了，但高对比度的纯色bg颜色会弹出文本。仍然不是合法的剪辑/屏蔽，但这是朝着正确方向迈出的一步。这是一种你必须咬紧牙关，等待用户赶上技术的情况。我在同一条船上，这很糟糕。

<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 */       
}