巨大的彈出窗口：為什么邊框半徑在圖像上不起作用，如何使它起作用？

Question

我有一個宏偉的彈出式插件，我希望其中的圖像具有邊框半徑，但我似乎無法使其正常工作。

文件

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有關。

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

希望能有所幫助。

Answer 2

這是一個實際的邊界半徑示例： http : //jsfiddle.net/CdES2/

HTML ：（使用來自Google的隨機圖片）

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

輸出：

Answer 3

嘗試在邊界半徑之前添加供應商前綴。

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