web-dev-qa-db-ja.com

コンテンツの下のインセットボックスシャドウ

理由はわかりませんが、コンテンツの下に挿入ボックスの影が表示されています。

次に例を示します。

div {
   box-shadow:inset 0 0 10px black;
   height:300px;
   color:red;
}
<div>
   a
</div>

http://jsfiddle.net/MAckM/

aがボックスの影の上にあることがわかります。

ボックスシャドウをaの上に配置するにはどうすればよいですか？

z-indexcss
33
henryaaron

絶対位置と100％の高さと幅で、div内に新しい要素を作成し、その要素にボックスの影を付ける必要があります。

HTML：

<div>
    <div></div>
    a
</div>​

CSS：

div {
    height:300px;
    color:red;
    position:relative;
}

div div {
    box-shadow:inset 0 0 10px black;
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
}​

これが JSFiddle です。

編集：

または、疑似要素を使用できます。

HTML：

<div>
    a
</div>​

CSS：

div {
    height:300px;
    color:red;
    position:relative;
}

div:before {
    content:'';
    display:block;
    box-shadow:inset 0 0 10px black;
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
}​

JSFiddle 。

34
fncombo

この回答は、最小限の例で最も簡単なソリューションを提供し、スクロールの問題に対処します。

残念ながら、余分なラッピングを回避する方法はありませんdiv（ box-shadowレイヤー化 ）。

.container {
  position: relative;
}

.container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  box-shadow: inset 0 0 9px 3px yellow;
  pointer-events: none;
}

.items {
  height: 100px;
  overflow: scroll;
}
<div class="container">
  <div class="items">
    <div class="item">One</div>
    <div class="item">Two</div>
    <div class="item">Three</div>
    <div class="item">Four</div>
    <div class="item">Five</div>
    <div class="item">Six</div>
    <div class="item">Seven</div>
    <div class="item">Eight</div>
    <div class="item">Nine</div>
    <div class="item">Ten</div>
    <div class="item">Eleven</div>
    <div class="item">Twelve</div>
  </div>
</div>
1
Michael Plotke