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

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角落也是正方形时带有方角.

代码(示例):

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

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

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

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

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

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