css - 要素の左側のみの Box-Shadow

Question

要素の左側だけにボックスシャドウを設定するのに問題がありました。

私はこれを試しました：

.box {
    box-shadow: -10px 0px 3px 0px #aaa;
}

<div class="box">Example element</div>

ただし、ボックスシャドウは灰色の線のように見え、ボックスシャドウを使用するときに慣れている通常のシャドウ効果がありません。また、上記の例には、私が取り除こうとしている小さなトップボックスシャドウが含まれています。

score 111 · Accepted Answer

おそらく、ぼかしを増やし、広がりを少し減らす必要があります。

box-shadow: -10px 0px 10px 1px #aaaaaa;

希望する効果が得られるまで、http://css3generator.com/のボックスシャドウジェネレーターをいじってみてください。

score 3 · Accepted Answer

3

box-shadow: inset 10px 0 0 0 red;

于 2018-04-05T08:54:58.417 に答える

score 1 · Accepted Answer

box-shadow: -15px 0px 17px -7px rgba(0,0,0,0.75);

説明：

最初の px 値は -15px に設定された「Horizontal Length」で、影を左に配置します。次の px 値は 0 に設定されているため、影の上下が中央に配置され、上下の影が最小化されます。

3 番目の値 (17px) はぼかし半径として知られています。数値が高いほど、影がぼやけます。最後の px 値 -7px は拡散半径です。正の値は影のサイズを大きくし、負の値は影のサイズを小さくします。-7px では影がアイテムの上下に表示されないようにします。

4 に答える 4