css - 如何使用 box-shadow 部分圆化给定 block 的 Angular ，并使用 unrounded box-shadow(webkit 和 gecko)保持非圆 Angular ？

Question

我有一个带有多个边框的 div，对于一个边框，我使用了 box-shadow。我希望这个 div 有几个圆 Angular 和一个方 Angular 。但是，只要一个 Angular 添加了 border-radius(0 除外)，box-shadow 的其他 Angular 就会变成圆 Angular ，如下所示很好(半径不同于 border-radius 的任何指定值)。有没有办法为一些 Angular 设置 border-radius，但不是全部，并且让 box-shadow 使用与 border 相同的半径> 所有 Angular 落？

此行为存在于 Chrome 19、Firefox 13 和 Safari 5 中，但不存在于 Internet Explorer 9 或 Opera 12 中，它们都显示 box-shadow 符合预期——当 border 的 Angular 也是方形时，box-shadow 的 Angular 也是方形的。

代码(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 中看起来不错。

fiddle 更新:http://jsfiddle.net/G2bvw/1/

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

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

诀窍是用边框做阴影，用阴影做边框。