7

我有一个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>
4

2 回答 2

2

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

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

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

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

诀窍是使用边框作为阴影和阴影作为边框。

于 2012-07-10T17:11:35.343 回答
0

请改用此 CSS（示例、比较）：

.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;

}
于 2012-07-11T17:03:23.147 回答