css - 異なるルールからのcss3複数のシャドウ

Question

css3の複数のシャドウが異なるcssルール/クラスから蓄積される可能性はありますか？

すなわち

.multipleShadows {box-shadow: 0 0 10px 5px black, 40px -30px lime}

要素に2つの影、黒とライムを作成します。

しかし、2つの異なるクラスが必要です。1つはblackShadow用、もう1つはlimeShadow用です。

.blackShadow {box-shadow: 0 0 10px 5px black}
.limeShadow {box-shadow: 40px -30px lime}

両方が両方のクラスを持つ単一の要素に適用されています。

<div class="blackShadow limeShadow">my div</div>

これはできますか？この目標を達成できる別の方法はありますか？

ありがとう。

score 2 · Accepted Answer

このように書いてください：

.blackShadow.limeShadow {box-shadow: 0 0 10px 5px black, 40px -30px lime}

score 0 · Accepted Answer

最終的に、元のdiv内に配置された追加のdivを使用し、2番目のシャドウクラスを内部divに適用しました。

<div class="blackShadow"><div class="limeShadow"> my div</div></div>

これは、シャドウクラスの定義を分離し、両方のシャドウを同時に表示できるために選択されました。

score 0 · Accepted Answer

.doubleShadowのような別のクラスを作成するか、の別のスタイルを作成する以外に、これを行うためのより良いメソッドはありません.blackShadow .limeShadow。

LESSを使用してミックスインを作成し、それを実装できます。別の解決策を探している場合は、それがより良いオプションになります。

それにもかかわらず、私はあなたが質問で与えたものをいじくりまわしました。

3 に答える 3