Question

我已经对相对定位的outer div的角落进行了舍入（它必须保持实际定位 - 这很重要）。我已经隐藏了该div的溢出，因此其中包含的image和inner div也会使其角落变圆。

在Safari中工作得非常好。除了Safari之外，查看上面的小提琴并且看起来很棒，在Safari中查看它并且inner div没有圆角。我已经将image固定为圆角，特别是圆角。然而，inner div将在最终网站中制作动画，所以我不能只剪切它的角落。据我所知，我需要溢出隐藏在Safari中工作，就像在其他浏览器中一样，或者我需要高效的解决方法。有任何想法吗？ jQuery是一个选项，但我更喜欢非JavaScript的解决方案。

解决方案：看起来它是webkit中的一个错误。我的解决方案是在它变得引人注目之前淡出div，但对于后代：webkit.org/blog/181/css-masks。如果褪色不是一个可行的选择，webkit css面具将能够为我淘汰那些讨厌的角落。

Answer 1

将边框半径应用于弹出的div的左下角。并缩短宽度以匹配其容器。您将获得一个正在寻找的圆角。我更新了你的小提琴：

http://jsfiddle.net/e8GR6/10/

有些事情伤害了你。你的宽度比容器大，所以你不会看到子div的结尾，因为溢出被隐藏了。我会使用box-sizing: border-box;并设置您的width: 100%;

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

将解决顶部未被剪裁的问题。

Answer 2

将thumb_overlay宽度更改为153px，并为border-bottom-left-radius和border-bottom-right-radius添加webkit定义。

-webkit-border-bottom-left-radius: 20px;
-webkit-border-bottom-right-radius: 20px;

Fiddle.

在动画期间，Safari圆角无法隐藏溢出

2 个答案: