10

我在圆形 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，因此也希望能够为他们提供一个优雅的解决方案。任何帮助表示赞赏！干杯

4

1 回答 1

5

这个适用于 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 中测试过这个（它有剪辑错误）并且它有效！

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

于 2011-04-16T07:09:07.323 回答