web-dev-qa-db-ja.com

背景がボックスシャドウのはめ込み効果を壊すのはなぜですか？

次のような単純なボックスで内部シャドウ効果を実現しようとしています： alt text http://gotinsane.com/test.jpg

ここで、緑色のボックスは別のボックス内のコンテンツです。

私の問題は、コンテンツボックスに何らかの背景を与えると、外側のボックスボックスの影の効果が消えることです。

これが私の問題の例です （マークアップとcssを使用）、問題を証明するためにコンテンツの高さを小さく設定しました-atm私は本当にIE *を気にしません、これは単なるテストです。

何か案が？

[〜＃〜]更新[〜＃〜]

ボックス内の内容は、スライドのようなものです ここでは例（元の問題） 。 thirtydotの答えはトリックを行いますが、コンテンツの機能でラッパーの背景を変更して、少しハックする必要があります： ここの例（thirtydotトリック） 。

これは解決策になる可能性がありますが、私はそれがあまり好きではなく、外側のボックスの影が内側のボックスの背景（色、画像）の後ろに来る理由を理解していません

UPDATE 2

別のフォーラムでこの問題について話します、i 別の方法を見つけました ：基本的に、ラッパーでbox-shadowを使用する代わりに、マスクとして機能し、コンテンツ（box-shadow要素）で直接border-radiusと.stepを使用しますただし、「マスク」効果はまさに私が達成しようとしていたものであるため、これも解決策ではありません。

内側の要素の背景が外側の要素のデザインに干渉する方法と理由、または外側の要素からドロップされた影が内側の要素の背後にある理由はまだわかりません。これはCSSのバグでしょうか？

UPDATE3

誰かが mozillaのバグ を開いて、「問題」を明確にするこの答えを得ました：

から http://www.w3.org/TR/css3-background/#the-box-shadow ：

スタックコンテキストとペイント順序の観点から、要素の外側の影はその要素の背景のすぐ下に描画され、要素の内側の影はその要素の背景のすぐ上（境界線と境界線の画像の下）に描画されます。もしあれば）。

特に、要素のchildrenの背景は、はめ込み影の上にペイントされます（実際、要素自体の境界と背景の上にペイントされます）。

したがって、レンダリングはまさに仕様が要求するものです。

UPDATE4

Fabio A.は別の解決策を指摘しました css3 pointer-eventsを使用 。見栄えがよく、IE8でも動作します;）

backgroundshadowcss
22
Strae

私もこの問題を抱えていて、この動作が正常であるとは思わないので、バグレポートを提出しました mozillaで

Google Chromeでも問題を再現できるので、これは本当にバグなのだろうかと思いますが、そうかもしれません。

編集：

確かにそれはバグではありませんが、それが機能するように意図された方法です。したがって、この情報に基づいて、私は jfiddleをフォークしました 例を示し、この解決策を考え出しました。

マークアップは次のようになります。

<div id="box">
    <div id="wrapper">
        <div id="box_content">
            Content here
        </div>
        <div id="mask"></div>
    </div>
</div>

マスクは別のdivになり、絶対位置に配置することで#box_contentの上に重ねられます。これはCSSです：

#wrapper{
    position: relative;
    display: inline-block;
    width: 280px;
    height: 280px;
    border-radius: 5px;
    margin: 10px;
}
#mask {
    position: absolute;
    top: 0px; left: 0px;
    width: 100%;
    height: 100%;

    pointer-events: none; /* to make clicks pass through */

    box-shadow: 0 0 10px #000000 inset;
}
#box_content{
    background-color: #0ef83f;
    height: 100%;
}
16
Fabio A.

私はあなたが実際に何を求めているのか少し混乱しています。それが完全に正しくない場合は、私に知らせてください:)

これが私の一番の推測です。

ライブデモ

CSS：
（ベンダープレフィックスルールに追加しました。）

#box {
    -moz-border-radius: 5px;
    border-radius: 5px; 

    -webkit-box-shadow: 0 0 10px #000;
    -moz-box-shadow: 0 0 10px #000;
    box-shadow: 0 0 10px #000;

    width: 280px;
    height: 280px;
    padding: 10px
}

#wrapper {
    background-color: #0ef83f;

    -moz-border-radius: 5px;
    border-radius: 5px; 

    -webkit-box-shadow: inset 0px 0px 18px #000;
    -moz-box-shadow: inset 0px 0px 18px #000;
    box-shadow: inset 0px 0px 18px #000;

    width: 240px;
    height: 240px;
    padding: 20px
}

HTML：

<div id="box">
    <div id="wrapper">
        Content here
    </div>
</div>
3
thirtydot

これは、追加のDOM要素（「ラッパー」など）がなくてもうまく機能します。

div.img {
  display: inline-block;
  position: relative;
  width: 400px;
  height: 280px;
  background-image: url(/images/anyimage.png);
}

div.img:after {
  display: inline-block;
  width: 100%;
  height: 300px; //parent height +20px
  position: absolute;
  top: -10px;
  left: 0;
  box-shadow(inset -25px 0 25px -25px rgba(0,0,0,.2), inset 25px 0 25px -25px rgba(0,0,0,.2));
  content: ' ';
  pointer-events: none;

}

0
Sergey Semashko

子のbackgroundプロパティがrgba、 このフィドルのように で指定されていることを確認してください。

親にbackground-colorを与えて、下にあるものが透けて見えるのを防ぎます。

ul {
    box-shadow : inset 0 0 10px 10px gray;
    background-color: white;
}

li:nth-child(even) {
    background : rgba(255,0,0,0.2);
}
0
reentim

問題はレイヤー化されているため、マージンまたはパディングを使用して回避できます。試してください http://jsfiddle.net/pramendra/FEk3c/5/

#box{
    background-color: #FFFFFF;
    border-radius: 10px 10px 10px 10px;
    box-shadow: 0 0 10px #000000;
    width: 300px;
    height: 300px;
}
#body{
    margin: 0px;
}


#wrapper{
    display:inline-block;
    width: 280px;
    height: 280px;
    border-radius: 5px;
    box-shadow: 0 0 10px #000000 inset;
      box-shadow:inset 0 0 10px 0 #000000;
        margin: 10px;
}

#box_content{
    background-color: #f00;
    margin:5px;
}
0
Pramendra Gupta

このフィドルを確認してください： http://jsfiddle.net/FEk3c/6/

#box{
    background-color: #FFFFFF;
    border-radius: 10px 10px 10px 10px;
    box-shadow: 0 0 10px #000000;
    width: 300px;
    height: 300px;
}
#body{
    margin: 0;
}

#wrapper{
    display: inline-block;
    width: 280px;
    height: 280px;
    border-radius: 5px;
    box-shadow: 0 0 10px #000000 inset;
    margin: 10px;
}
#box_content{
    background-color: #0ef83f;
    height: 100px;
}
0
Eric Fortis