如何用盒子阴影部分圆角给定块，并用不圆的盒子阴影（webkit和壁虎）保持不圆角？

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 - 带有当border 的角也是正方形时，box-shadow 的角也是正方形。

代码（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;

}