css - flexslider border-radius 不会在 Chrome、Safari 中包裹图像，但会在 Firefox 中

Question

我正在尝试使用幻灯片动画选项在 flexslider 上查看舷窗窗口。基本上，图像会滑动，但会被屏蔽成一个圆圈，我正在尝试使用边框半径和溢出来完成此操作：隐藏在 flexslider 包装器上。

在 Firefox 中查看此页面以查看所需的结果，因为它在那里工作。然后看到它不在 Chrome 或 Safari 中。这是链接（幻灯片是我的照片）：http: //imjoeybrennan.com/about.html

任何帮助深表感谢！谢谢，乔伊

Answer 1

只是帮你解决了一个问题。这个也很简单。它在 chrome 或 safari (webkit) 中不起作用的原因是，当使用溢出隐藏 + 位置相对和边框半径时，webkit 存在一个已知错误。简单的解决方法是将 svg webkit 掩码添加到同一元素：

.joey_pic .flexslider {
-webkit-border-radius: 200px;
-moz-border-radius: 200px;
border-radius: 200px;
-webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
overflow: hidden;
}

这也可能导致锯齿状边缘，因此另一种可能的解决方案是在 flexslider 中的图像上设置边框半径：（这是您在下面的图像上使用悬停过渡所做的操作）

.flexslider .slides img {
max-width: 100%;
display: block;
border-radius: 100px;
}

希望这可以帮助