圆角周围的盒子阴影？

Question

我正在使用Twitter的Bootstrap库快速拼凑原型.

这是我的布局在HTML中的样子:

<div class="navbar-messages container">
    <div class="alert alert-info fade in">
        <button class="close" data-dismiss="alert">&times;</button>
        <strong>Awesomeness!</strong> You're pretty cool.
    </div>
    <div class="alert alert-error fade in">
        <button class="close" data-dismiss="alert">&times;</button>
        <strong>Awesomeness!</strong> You're pretty cool.
    </div>
</div>

这是我的LESS的样子:

div.navbar div.navbar-messages {
    .drop-shadow(1px 1px 10px 1px rgba(0, 0, 0, 0.2));

    div.alert {
        -webkit-border-radius: 0px;
        -moz-border-radius: 0px;
        border-radius: 0px;

        margin-bottom: 0px;

        &:last-child {
            -webkit-border-bottom-right-radius: 4px;
            -webkit-border-bottom-left-radius: 4px;
            -moz-border-radius-bottomright: 4px;
            -moz-border-radius-bottomleft: 4px;
            border-bottom-right-radius: 4px;
            border-bottom-left-radius: 4px;
        }
    }
}

.drop-shadow(@params) {
    -moz-box-shadow: @params;
    -webkit-box-shadow: @params;
    box-shadow: @params;
}

真正奇怪的是投影不会围绕子元素的弯曲角落弯曲:

如何让它在拐角处正确弯曲？

Answer 1

你的div.navbar div.navbar-messages元素没有圆角,所以阴影看起来是方形的.如其名称所述,box-shadow在元素的框周围绘制阴影,而不是元素的内容,因此如果框本身没有圆角,那么阴影也不会.

您也可以尝试应用相同的border-radius样式div.navbar div.navbar-messages,因此它的阴影会围绕角落弯曲:

div.navbar div.navbar-messages {
    .drop-shadow(1px 1px 10px 1px rgba(0, 0, 0, 0.2));
    .rounded-bottom-corners(4px);

    div.alert {
        -webkit-border-radius: 0px;
        -moz-border-radius: 0px;
        border-radius: 0px;

        margin-bottom: 0px;

        &:last-child {
            .rounded-bottom-corners(4px);
        }
    }
}

.drop-shadow(@params) {
    -moz-box-shadow: @params;
    -webkit-box-shadow: @params;
    box-shadow: @params;
}

.rounded-bottom-corners(@params) {
    -webkit-border-bottom-right-radius: @params;
    -webkit-border-bottom-left-radius: @params;
    -moz-border-radius-bottomright: @params;
    -moz-border-radius-bottomleft: @params;
    border-bottom-right-radius: @params;
    border-bottom-left-radius: @params;
}