Question

我有一个div有多个边框，对于一个边框，我使用的是box-shadow。我希望这个div有一个圆角和一个方角。但是，只要一个角落添加了border-radius（0除外），box-shadow的其他角也会变圆（半径不同于任何指定的值） border-radius）。有没有办法为某些角设置border-radius，但不是全部，box-shadow使用与所有角落border相同的半径？

此行为出现在Chrome 19，Firefox 13和Safari 5中，但在Internet Explorer 9或Opera 12中不，它们都按预期显示box-shadow - 当box-shadow的角也是正方形时，border的方角。

代码（example）：

CSS

.block1 {
    padding: 18px 14px;
    margin: 5px;
    background: #fff;
    border: 1px solid red;
    -webkit-box-shadow: 0 0 0 5px rgba(0, 57, 47, .32);
    -moz-box-shadow: 0 0 0 5px rgba(0, 57, 47, .32);
    box-shadow: 0 0 0 5px rgba(0, 57, 47, .32);
    -webkit-border-radius: 10px 0 10px 10px;
    -moz-border-radius: 10px 0 10px 10px;
    border-radius: 10px 0 10px 10px;
}
.block2 {
    padding: 18px 14px;
    margin: 5px;
    background: #fff;
    border: 1px solid red;
    -webkit-box-shadow: 0 0 0 5px rgba(0, 57, 47, .32);
    -moz-box-shadow: 0 0 0 5px rgba(0, 57, 47, .32);
    box-shadow: 0 0 0 5px rgba(0, 57, 47, .32);
}
.outer {
    border: 1px solid green;
}

HTML

<p>Top-right block corner is not rounded, but box-shadow is:</p>
<div class="outer">
    <div class="block1">
        foo
    </div>
</div>

<p>Box-shadow on block without border-radius:</p>
<div class="outer">
    <div class="block2">
        bar
    </div>
</div>

Answer 1

在外部div上使用inset阴影。在chrome中看起来不错。

小提琴更新：http://jsfiddle.net/G2bvw/1/

更新了：如果你想要一个实体阴影，你不希望在外部div上插入阴影，红色边框是必须的，这应该适合你：

http://jsfiddle.net/G2bvw/3/

诀窍是将边框用作阴影，将阴影用作边框。

Answer 2

改为使用此CSS（example，comparison）：

.block-fixed {

    background: #fff;

    /* Have to increase padding by 1px for inset box-shadow */
    padding: 19px 15px;

    /* Use border for outer border */
    border: 5px solid rgba(0, 57, 47, .32);

    /* Use box-shadow for inner border */
    -webkit-box-shadow: inset 0 0 0 1px red;
    -moz-box-shadow:inset 0 0 0 1px red;
    box-shadow:inset 0 0 0 1px red;

    /* Have to adjust border-radius due to switching shadow/border */
    -webkit-border-radius: 15px 0 15px 15px;
    -moz-border-radius: 15px 0 15px 15px;
    border-radius: 15px 0 15px 15px;

}

如何使用盒子阴影部分地舍入给定块的角落，并使用未接地的盒子阴影（webkit和gecko）保持未接地的角落？

代码（example）：

CSS

HTML

2 个答案: