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

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;
}

希望这可以帮助