7

複数の境界線を持つ がdivあり、1 つの境界線に を使用してbox-shadowいます。これdivには、1 つの正方形の角を持ついくつかの丸みを帯びた角が必要です。ただし、1 つのコーナー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 を使用してください ( 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;

}
于 2012-07-11T17:03:23.147 に答える