Fancybox在边框半径上的白色角落

Question

我在Fancybox http://jsfiddle.net/LF27m/2/上应用边框半径，当我设置边框半径时，它会在Fancybox上创建白色边角。我不知道如何解决这个问题。

我的CSS代码是：

#a1 div.popup-container{ 
height:350px; 
width:400px; 
background:#88B3D1; 
-moz-border-radius:30px 30px 30px 30px; 
border-radius:30px 30px 30px 30px; 
-webkit-border-radius: 30px 30px 30px 30px; 
overflow: hidden; 
} 

我的HTML代码是：

<div id="a1"> 
    <div class="popup-container"> 
     <div class="image-container"> 
      <img src="AllureFree Logo.gif" alt="Smiley face" width="130" height="130"/> 
     </div> 
     </br> 
     <div> 
      <h2 style="text-align:center; color:white;"> You must be 18 to shop on our Website.</h2> 
      <h2 style="text-align:center; color:white;"> Please verify your birthdate.</h2> 
     </div> 
</div 
</div> 

Answer 1

他们是从应用到.fancybox-skin选择（的fancybox CSS文件）的样式来。你可以像你的自定义CSS文件来覆盖默认值：

.fancybox-skin { 
    background-color: transparent; 
    box-shadow: 0 0 0 rgba(0, 0, 0, 0) !important; 
} 

还添加padding: 0到您的fancybox脚本

$(document).ready(function() { 
    $('html').append('<a class="fancybox" style="display:none" href="#a1"></a>'); 
    $('.fancybox').fancybox({ 
     padding: 0, 
     afterClose: function() { 
      $('a[href="#a1"]').remove(); 
     } 
    }); 
    $('a[href="#a1"]').trigger('click'); 
}); 

见JSFIDDLE