Html 圆角周围的长方体阴影？

我正在使用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>

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

---

如何使其正确地围绕拐角弯曲？

您的

div.navbar div.navbar-messages

元素缺少圆角，因此阴影显示为方形。如其名称所述，

box shadow

在元素的框周围绘制阴影，而不是元素的内容，因此如果框本身没有圆角，则其阴影也不会

您也可以尝试将相同的

边框半径

样式应用于

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

---

是的…只要在有阴影的div上加一个边界半径。确保边界半径值与div内对象的边界半径值相匹配，并且它们将正确匹配。

我有：

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

因此：

---

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

也许按钮后面的渐变背景没有被边界半径剪裁？我无法使用您在问题中给出的代码重现问题，请参阅。（在FF和IE9中测试，你的问题中没有提到特定的浏览器。）@Jeroen:你的小提琴与这里的代码不匹配。在这个问题中，长方体阴影位于父元素上。在您的小提琴中，框阴影仅适用于

div.alert

元素。我注意到您正在将参数传递到css示例中。我快速搜索了一下，没有找到任何有用的东西。这是为了证明概念，还是事实上你可以做些什么？@Jackson:这是一个较少的功能。我刚刚注意到这个问题没有标记为[更少]，所以我在中添加了这一点。您可以在此处阅读：

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;