1

以下のようにボックスの影を作成したい。

ボックスシャドウの私の研究によると。以下のパラメータを取ります:

DIV {
box-shadow: <horizontal> <vertical> <blur> <color> [inset]
}

このためのjsfiddleを見つけてください。

以下のようにボックスの影を作成したい。

上記の例を作成するには、ボックス シャドウを使用する必要があります。

例 1 では、以下のスタイルを使用しました。

 box-shadow:0px 10px 22px 0px gray;

ここでは、上部、左側、右側にも明るい影ができています (これは望ましくありません)。

例 2 では、以下のスタイルを使用しました。

 box-shadow:10px 10px 22px 0px gray inset;

右と下の部分にインナーシェーディングを入れたくない。

box-shadow で不要なシェーディングを削除することは可能ですか?

4

4 に答える 4

2

ボックス シャドウを片側、両側、または 3 側に設定できますが、その場合はぼかし値をゼロに設定する必要があります。デモhttp://dabblet.com/gist/1579740を参照してください。

ただし、divを同じ幅の別の外側のdivにラップすることで、最初の種類の影をエミュレートできますが、設定した高さはわずかに大きくなりますoverflow: hidden;

div の背景を半透明にする必要がない場合は、下と右の影を隠すために、絶対配置の疑似要素を使用して 2 番目の背景をエミュレートすることもできます。

デモhttp://dabblet.com/gist/3149980

最初のシャドウの HTML:

<div class="outer">
    <div class="shadow1"></div>
</div>

最初の影の CSS

div {
    width: 100px;
    height: 100px;
}
.outer {
    padding-bottom: 35px;
    overflow: hidden;
}
.shadow1 {
    box-shadow: 0px 10px 22px 0px gray;
    background: #f0f0f0;
}

2 番目のシャドウの HTML

<div class="shadow2"></div>

2 番目のシャドウの CSS

.shadow2 {
    box-shadow:10px 10px 22px 0px gray inset;
    position: relative;
    background: #f0f0f0;
}
.shadow2:before {
    top: 22px;
    bottom:0;
    left:22px;
    right:0;
    position: absolute;
    background: #f0f0f0;
    content:'';
}
于 2012-07-20T09:56:37.687 に答える
1

追加のマークアップを使用してそれを行うことができます（要素をラップする追加の div で、不要な他の影を非表示にします）

または、シャドウ スプレッド プロパティ (box-shadow宣言の 4 番目の数値) を使用して、シャドウを縮小し、シャドウの側面部分を非表示にすることもできます。

これにより、下部に小さな影が作成されますが、余分な HTML は必要ありません。

http://jsfiddle.net/hBMQm/2/

于 2012-07-20T10:03:11.090 に答える
1 
#b {
    position:absolute;
    width:100px;
    height:100px;
    top:200px;
    left:200px;
    background-color:#F0F0F0;
    text-align:center;
    box-shadow:20px 20px 22px 0px gray inset;
 }

今、あなたは内側の影を持っていますが、あなたが求めたようにあなたの右または下にはありません. 私はあなたを誤解しましたか？

于 2012-07-20T10:04:11.520 に答える