Question

我正在使用fancybox 2，我可以摆脱框架外部的填充，但随后我失去了它带来的边框半径。我想要的是框架内主要内容周围的边界半径。所以我尝试进入css并为fancy-box内部选择器添加border-radius，它将无法正常工作。如何在没有边框的情况下为框架提供圆角？如果有人能帮助我，这将是伟大的！

Answer 1

试试这个适合我的代码

在完整方法的花式框之后添加自定义类。

实施例

<强> HTML

<a href="#signin-container" class="signin-ovr"> Login </a>

JS

$(document).ready(function(e) {
    $(".signin-ovr").fancybox({
        afterLoad   :   function(){
                            $("#fancybox-content").addClass('fancybox-content-cust');
                            $(".fancybox-bg").addClass('fancybox-bg-cust');
                            $("#fancybox-outer").addClass('fancybox-outer-cust');
                        }

    });     
});

<强> CSS

.fancybox-content-cust {
    overflow: visible !important;
    border: 10px solid #FFFFFF;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
}

.fancybox-bg-cust{
    display: none;  
}

.fancybox-outer-cust {
    background: transparent !important;
}

然后您将获得覆盖框的边框半径。

Answer 2

for fancybox v2 round borders

.fancybox-outer, .fancybox-inner, .fancybox-skin {
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
    border-radius: 10px!important;
}

Answer 3

CSS3具有讽刺性的边界半径属性，标题为border-radius，有一些特定的变体，即Firefox moz-border-radius。

它的用法如下：

#div-id .specific-class {
    border-radius: 10px;
}

如果你只想要一个四舍五入的话就可以像这样修改

border-top-left-radius:2em;
border-top-right-radius:2em;
border-bottom-right-radius:2em;
border-bottom-left-radius:2em;

我希望这能回答你的问题。

添加一个没有填充的border-radius到fancybox2

3 个答案: