javascript - 华丽的弹出窗口 : Why doesn't border radius work on the image and how can i make it work?

Question

我有一个 magnific popup 插件，我希望其中的图像有一个边框半径，但我似乎无法让它工作。

CSS

img.mfp-img {
    border-radius: 5px;
}

HTML 文件

<div class="top">
                                <a class="overlay mgp-img" href="images/image-standard-1-lg.jpg">
                                    <i class="fa fa-search md"></i>
                                </a>
                                <a href="#"><img class="img-responsive" src="images/image-standard-1.jpg" alt="a"></a>
                            </div>

这是我的代码。我也尝试使用 overflow:hidden 但我仍然没有结果。

我注意到你们中的一些人提到使用 vendor 前缀。这也不起作用，我认为它与插件本身有关，而不是 css。

Answer 1

从 img.mfp-img 选择器中删除填充:

img.mfp-img {
    padding: 0;
    margin: 40px auto;
      border-radius: 10px;
}

最好将 40px 值放在边距上，否则您的标题将停留在图像顶部。

默认情况下 .mfp-figure::after 有一个 background-color 和一个 box-shadow，所以你应该删除它或者在这里也应用 border-radius。

.mfp-figure::after {
    background: transparent;
    border-radius: 10px;
}

希望对您有所帮助。