边界半径失败在safari（丑陋裁减） [英] border-radius fails under safari (ugly clipping)

问题描述

有没有人知道在Safari中发布bug的解决方法？

当我使用 border-radius 在CSS3中创建圆角边框，它只是在Safari，FF等等上正常工作。

但是当边框颜色是背景颜色时，你可以看到

您可以在这里尝试： http://de.roundedcorner.org/css3-rounded-corner-generator 只需将边框颜色和网站背景设置为＃333333

感谢您的帮助！

解决方案

由于背景剪切。

 >  -moz-background-clip：padding; 
 -webkit-background-clip：padding-box; 
 background-clip：padding-box; 
  

有关background-clip的更多信息，请看这里：
https://developer.mozilla.org/en/CSS/background-clip

Does anybody know a workaround for folowing 'bug' in Safari?

When I use border-radius to create rounded borders in CSS3 it just works fine on Safari, FF and so on.

But when the border-color is the color like in the background you can see the containers background overlapping the border.

You can try it here: http://de.roundedcorner.org/css3-rounded-corner-generator Just set the border-color and sites background to #333333

Thanks for your help!

解决方案

That's most likely due to background clipping.

The following should correct that.

-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;

For some more on background-clip, have a look here: https://developer.mozilla.org/en/CSS/background-clip

这篇关于边界半径失败在safari（丑陋裁减）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！