边界半径溢出：隐藏，且文本不被剪切。
|
我正在圆形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;
}
没有找到相关结果
已邀请:
1 个回复
届甸衬丝蚕
然后将其放在文本上，并带有与背景颜色相同的边框，并且位移与边框一样大：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 */ }