Question

我正在尝试使用幻灯片动画选项在flexslider上查看舷窗窗口。基本上图像会滑动但是会被屏蔽成圆圈而我正试图通过border-radius和overflow来实现这一点：隐藏在flexslider包装器上。

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

非常感谢任何帮助！谢谢，乔伊

Answer 1

刚刚帮助你解决了一个问题。这个也很容易。它不适用于chrome或safari（webkit）的原因是，当使用overflow-hidden + position relative和border radius时，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;
}

希望这有帮助

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

1 个答案: