flexslider border-radius不会在Chrome，Safari中包装图片，但会在Firefox中 [英] flexslider border-radius does not wrap image in Chrome, Safari, but will in Firefox

问题描述

我想使用滑动动画选项在flexslider上看到舷窗窗口。基本上形象将滑动体，但在一个圆圈掩盖我试图与边界半径和溢流做到这一点：隐藏在flexslider包装

I'm trying to have a porthole window look on a flexslider with the slide animation option. Basically the image would slide but be masked in a circle and I'm trying to accomplish this with border-radius and overflow:hidden on the flexslider wrapper.

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

Check this page out in Firefox to see the desired result, cause its working there. Then see that it doesn't in Chrome or Safari. Here is the link (the slideshow is the picture of me): http://imjoeybrennan.com/about.html

任何帮助都非常感谢！
感谢，
Joey

Any help is much appreciated! Thanks, Joey

推荐答案

刚刚帮助你解决了一个问题。这一个也很容易。它不工作在chrome或safari（webkit）的原因是有一个已知的bug，webkit使用overflow-hidden +位置相对和边界半径。最简单的解决方法是一个SVG的WebKit面膜添加到相同的元素：

just helped you with an issue. This one is easy too. The reason it is not working in chrome or safari (webkit) is that there is a known bug with webkit when using overflow-hidden + position relative and border radius. The easy fix is to add an svg webkit mask to the same element:

.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中的图像：（这是你在做图像下面悬停过渡什么的）

This can also cause jagged edges so another possible solution is to set the border radius on the images within your flexslider: (this is what you are doing on the images below with the hover transition)

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

希望这有助于

这篇关于flexslider border-radius不会在Chrome，Safari中包装图片，但会在Firefox中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！