-webkit-border-radius 看起来很丑
我正在使用以下属性设计灯箱 div 的样式：
#lightbox {
border: 0.3em solid #acaeb0;
-webkit-border-radius: 1em;
background: #eee -webkit-gradient(linear, 0% 60%, 0% 100%, from(#eee), to(#ccc));
-webkit-box-shadow: 0 0 0.6em 0.3em #888;
}
问题是生成的圆角看起来非常难看（使用 safari5）：
问题是圆角处的空白。 你知道我怎样才能避免这种行为吗？
编辑： 添加 -webkit-background-clip: padding-box; 属性后，它看起来更好，但并不完美：
我减小了边框的宽度，但它看起来与粗边框相同。我是否必须设置另一个属性才能使其看起来完美？
编辑2： 似乎是webkit的一个Bug： https://bugs.webkit.org/show_bug.cgi?id=21819
I'm styling a lightbox div with the following properties:
#lightbox {
border: 0.3em solid #acaeb0;
-webkit-border-radius: 1em;
background: #eee -webkit-gradient(linear, 0% 60%, 0% 100%, from(#eee), to(#ccc));
-webkit-box-shadow: 0 0 0.6em 0.3em #888;
}
Problem is that the resulting rounded corners looks very ugly (using safari5):
Problem is the white space at the rounded corner.
Do you know how I can avoid this behavior?
EDIT:
After adding the -webkit-background-clip: padding-box; property it looks better but not perfect:
I reduced the width of the border but it looks the same with thick borders. Do I have to set another property to make it perfect looking?
EDIT2:
Seems to be a Bug of webkit:
https://bugs.webkit.org/show_bug.cgi?id=21819
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
这称为“背景出血”。
有关可能的修复，请查看此网站：http:// /tumble.sneak.co.nz/post/928998513/fixing-the-background-bleed。
正如它所说，你应该尝试设置：
This is called "background bleeding".
For a possible fix, take a look at this site: http://tumble.sneak.co.nz/post/928998513/fixing-the-background-bleed.
As it says, you should try setting:
在类似的情况下，唯一让我满意的技巧是将一个盒子包裹在另一个盒子中：一个带有背景，第二个带有边框，两者都具有相同的边框半径，但第一个带有透明边框。代码如下：
.fist-block {background: black; border-radius: 20px; border: 0px solid transparent;}.second-block {border-radius:20px; border: 1px solid red;}
The only hack which gave me satisfaction on a similar case was to wrap a box within another : one with the background, the second with the border, both with the same border-radius but the first one with a transparent border. And the code comes like this :
.fist-block {background: black; border-radius: 20px; border: 0px solid transparent;}.second-block {border-radius:20px; border: 1px solid red;}
当使用 1px 边框时，我在 Chrome 中遇到此问题，但是使用 2px 及以上看起来不错。
铬：13.0.782.218 m
I get this problem in Chrome when using a 1px border however using 2px and above looks fine.
Chrome: 13.0.782.218 m