圆角周围的盒子阴影？

Question

圆角周围的盒子阴影？

28

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

1

也许按钮后面有一个渐变背景，而这个背景没有被边框半径所裁剪？我使用你在问题中提供的代码无法重现这个问题，请参考这个jsfiddle。（我已在Firefox和IE9中测试过，但你在问题中没有提到具体的浏览器。） - Jeroen

@Jeroen：你的fiddle与这里的代码不匹配。在这个问题中，box shadow在父元素上。在你的fiddle中，box shadow仅适用于'div.alert'元素。 - BoltClock

4个回答

4

我有这个：

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

1

是的...只需在具有阴影的div上放置border-radius。确保border-radius值与div内部对象的值匹配，它们将正确匹配。

- user2703774

1

你可以在代码中使用filter:drop-shadow()来代替默认的box-shadow。

以下是一个例子：

div.navbar {
    filter: drop-shadow(5px 5px 10px #44444d81);
}

这就是诀窍

- Misan

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- BoltClock · Accepted Answer

你的 div.navbar div.navbar-messages 元素缺少圆角，所以阴影看起来是方形的。如其名称所示，box-shadow 绘制在元素的框（box）周围，而不是元素的内容（contents）周围，因此如果该框本身没有圆角，则其阴影也不会有。

你可以尝试将相同的 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;
}