magnific popup：为什么边界半径在图像上不起作用，我怎样才能使它起作用？答案

【问题标题】：magnific popup: Why doesn't border radius work on the image and how can i make it work?magnific popup：为什么边界半径在图像上不起作用，我怎样才能使它起作用？
【发布时间】：2014-05-09 08:06:55
【问题描述】：

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

le 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>

这是我的代码。我也尝试使用溢出：隐藏，但仍然没有结果。

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

【问题讨论】：

请包含您的 HTML

标签： javascript jquery css magnific-popup

【解决方案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;
}

希望对您有所帮助。

【讨论】：

【解决方案2】：

这是一个实际使用的边界半径示例：http://jsfiddle.net/CdES2/

HTML：（使用来自谷歌的随机图片）

<img src="http://fullwallpaper.tk/wp-content/uploads/kitten-3.jpg" style="width: 50%; height: 50%;"/>

CSS：

img {
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
    border-radius: 20px;
}

输出：

【讨论】：

【解决方案3】：

尝试在边界半径前添加供应商前缀。

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

【讨论】：