11

この質問に対する答えは不可能だと思いますが、誰かが巧妙な回避策を知っていることを期待して質問しています.

.left-inset要素の左側に 1px の白いボックス シャドウを追加して深さを与える次のクラスがあるとします。

.left-inset {
  box-shadow: inset 1px 0 0 rgba(255,255,255,.25);
}

問題は、このクラスを追加する要素にすでにボックス シャドウが定義されている場合、このボックス シャドウが既存のボックス シャドウをオーバーライドすることです (または、カスケードによってはこのシャドウが適用されません)。競合することなく、このクラスを安全に追加する方法を見つけたいです。

次のようなものに対する将来のブラウザサポートがあることを願っています：

.left-inset {
  box-shadow: inherit, inherit, inherit, inset 1px 0 0 rgba(255,255,255,.25);
}

継承は親からの値を意味するため、継承という言葉はここでは適切ではありませんが、おわかりいただけたでしょうか。

この方法は、完全な証明ではありませんが、既存のボックス シャドウが 3 つ以上定義されていない限り、競合していないことを少なくとも知ることができます。ほとんどの場合、これで十分です。

このようなことが可能かどうか、または既に定義されているものに追加のシャドウを追加するための提案された構文があるかどうか、誰かが知っていますか?

4

4 に答える 4

7

絶対配置の疑似要素 (元のコンテナーに位置が設定されている) が唯一の解決策のようです。

フィドルを参照してください。（視覚的に異なるサイズ/色をしました）。

.test:before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    box-shadow:3px 3px rgba(275,0,0,.25);
}
于 2012-07-14T18:20:01.747 に答える
0

1 つの方法は、現在のボックス シャドウを決定し、必要なパーツを重ね合わせて適用し直すことです (問題が発生するかどうかはわかりませんが..)。

window.getComputedStyle(element).boxShadow

次のような形式の文字列が得られます。

<color> <left> <top> <softness> <spread>- 例えば：rgb(102, 102, 102) 5px 5px 5px 0px

上記の文字列を変数に入れたら：

  1. スペース文字を使用して分割します-s = s.split(' ');
  2. 最後の 4 つの部分を取る
  3. 配列内の必要に応じて個々の値を置き換えるか保持する
  4. スペースを使用して配列に参加します -s = s.join(' ');
  5. それを要素に適用します-elem.style.boxShadow = s;

注: これは ff と chrome で機能します (返される文字列形式が同じであるため)。しかし、これは製品版で実際に試すにはやり過ぎだと思います。さらに、css で記述したクラスのスタイルを重ね合わせるには、さらに多くの作業が必要になります。

于 2012-07-14T18:25:23.917 に答える
0

1 つの解決策は、疑似要素を使用することです。

.left-inset::after {
    content: '';
    width: 100%;
    height: 100%;
    display: block;

    box-shadow: 1px 0 0 rgba(255,255,255,.25);
}

少しハックですが、要素が ::after 疑似要素を定義していない限り、機能するはずです。

于 2012-07-14T18:16:08.817 に答える
-2

これはあなたが望むものだと思います http://www.css3.info/preview/box-shadow/

下にスクロールして、複数の影を見つけます。

于 2012-07-14T18:08:17.337 に答える