2

この方法で同じ要素に 2 つのボックス シャドウを設定できることはわかっています。

box-shadow: inset 0 2px 0px #dcffa6,  0 2px 5px #000;

ページのさまざまな部分でクラスに css プロパティを割り当てているので、box-shadow を 2 回割り当てて同じことを達成できるかどうか疑問に思います。何かのようなもの：

box-shadow: inset 0 2px 0px #dcffa6;
box-shadow:0 2px 5px #000;

ただし、これは機能しません。2 番目の box-shadow が最初の box-shadow をオーバーライドします。

ありがとう。

編集：

また、同じ要素に 2 つのクラスを適用しようとしましたが、うまくいきませんでした: http://jsfiddle.net/DQvyw/

編集2：

本当の解決策ではありませんが、私はこれをやってしまいました: http://jsfiddle.net/DQvyw/1/

4

2 に答える 2

1

これを行う別の方法は、2 つの div を作成し、それぞれに正しいスタイルを適用することです。

.divoutside{
    border-radius: 8px;
    box-shadow: 0px 2px 4px #4D4D4D;
}
.divinside{
    border: 1px solid #4D4D4D;
    border-radius: 8px;
    box-shadow:inset 0 0 2px #FFA500;
        padding: 4px;
}

<div class="divoutside"><div class="divinside"></div></div>

例: http://jsbin.com/ujuqem/1/edit

ハッピーコーディング:)

于 2013-02-03T04:00:18.367 に答える
0

2つの別々の宣言でこれを行うことはできません。CSSでは、同じルールに2つの値を定義すると、後者の宣言が前者をオーバーライドします。ただし、JavaScriptを使用すると、古い値を置き換える代わりに、2番目の値を連結できます。何かのようなもの：

var el = document.getElementsByClassName("your_class_name");
var n = el.length;
for(var i = 0; i < n; i ++) {
    var cur = el[i];
    cur.style.boxShadow += ", 0 2px 5px #000000"; //notice the comma in the beginning
}

これがあなたの望むものかどうかはわかりませんが、それが何らかの形であなたを助けてくれたことを願っています！

于 2012-08-25T11:13:36.083 に答える