圆角周围的盒子阴影？

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

真正奇怪的是投影没有围绕子元素的弯曲角弯曲：

我怎样才能让它在拐角处正确弯曲？

原文由 Naftuli Kay 发布，翻译遵循 CC BY-SA 4.0 许可协议

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

原文由 BoltClock 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

我有这个：

 blockquote {
    border: none;
    font-style: italic;
    font-size: 20px;
    line-height: 40px;
    font-weight: 300;
    padding: 0;
    margin: 30px 0;
    text-shadow: 0 1px 1px #666666;
    background: rgba(255,255, 255, 0.4);
    box-shadow: 0px 0.5px 1px #888888;
    padding-left: 10px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
}

所以：

 -webkit-border-radius: 6px;
        -moz-border-radius: 6px;
        border-radius: 6px;

这对我很有用！非常感谢。

原文由 Paulo Henrique 发布，翻译遵循 CC BY-SA 3.0 许可协议