ボックスのシャドウオーバーフロー親

Question

私は、影を入れたサイドバーブロックを作成しています。 .block-title要素の上に影が表示されますが、影の下に影が表示されます。

あなたがここで問題を見ることができます：JSFiddle

これは私のCSSです：

.block{ 
    width:250px; 
    -webkit-box-shadow: inset 7px 0 10px -5px rgba(0,0,0,0.3); 
    -moz-box-shadow: inset 7px 0 10px -5px rgba(0,0,0,0.3); 
    box-shadow: inset 7px 0 10px -5px rgba(0,0,0,0.3); 
    border:1px solid gray; 
} 

.block .block-title{ 
    background:#dedede; 
    padding:5px; 
} 

.block .block-title span{ 
    color:#333; 
    font-size:14px; 
    text-align:center; 
} 

.block .block-content{ 
    padding:10px; 
} 

Answer 1

あなたは絶対位置擬似要素（::before）を使用して、子どもたちの上にボックスシャドウを設定することができます。疑似要素にpoiner-events: noneを使用すると、その下にある要素との対話が可能になります。ここで何が起こっている

body { 
 
    margin: 10px; 
 
} 
 

 
.block { 
 
    position: relative; 
 
    width: 250px; 
 
    border: 1px solid gray; 
 
} 
 

 
.block::before { 
 
    display: block; 
 
    position: absolute; 
 
    top: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    box-shadow: inset 7px 0 10px -5px rgba(0, 0, 0, 0.3); 
 
    pointer-events: none; 
 
    content: ''; 
 
} 
 

 
.block .block-title { 
 
    background: #dedede; 
 
    padding: 5px; 
 
} 
 

 
.block .block-title span { 
 
    color: #333; 
 
    font-size: 14px; 
 
    text-align: center; 
 
} 
 

 
.block .block-content { 
 
    padding: 10px; 
 
}

<div class="block"> 
 
    <div class="block-title"> 
 
    <span>Lorem ipsum dolor</span> 
 
    </div> 
 
    <div class="block-content"> 
 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam efficitur elit quis auctor sollicitudin. Aenean est lorem, ornare in laoreet sed, lobortis ac libero. Phasellus dignissim imperdiet varius. 
 
    </div> 
 
</div>

Answer 2

は.block-titleはシャドウ効果をカバーしていることです。 opacityを追加するか、colorにrgbaの値を指定すると、エフェクトをもう少し表示させることができます。

私の例では、16進数の色をrgbaに変更しました。

JS-フィドル：https://jsfiddle.net/4fkfdxn6/4/

HTML

<div class="block"> 
    <div class="block-title"> 
    <span>Lorem ipsum dolor</span> 
    </div> 
    <div class="block-content"> 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam efficitur elit quis auctor sollicitudin. Aenean est lorem, ornare in laoreet sed, lobortis ac libero. Phasellus dignissim imperdiet varius. 
    </div> 
</div> 

CSS

body{ 
    margin:10px; 
} 

.block{ 
    width:250px; 
    -webkit-box-shadow: inset 7px 0 10px -5px rgba(0,0,0,0.3); 
    -moz-box-shadow: inset 7px 0 10px -5px rgba(0,0,0,0.3); 
    box-shadow: inset 7px 0 10px -5px rgba(0,0,0,0.3); 
    border:1px solid gray; 
} 

.block .block-title{ 
    background:rgba(0, 0, 0, 0.4); /*changed this value*/ 
    padding:5px; 
} 

.block .block-title span{ 
    color:#333; 
    font-size:14px; 
    text-align:center; 
} 

.block .block-content{ 
    padding:10px; 
} 

Answer 3

私が見ることができる最もまっすぐ進むソリューションは、ボックスシャドウを追加することですあなたのタイトルに、彼を参照してください再：

body{ 
    margin:10px; 
} 

.block { 
    width:250px; 
    -webkit-box-shadow: inset 7px 0 10px -5px rgba(0,0,0,0.3); 
    -moz-box-shadow: inset 7px 0 10px -5px rgba(0,0,0,0.3); 
    box-shadow: inset 7px 0 10px -5px rgba(0,0,0,0.3); 
    border:1px solid gray; 
} 

.block .block-title { 
    background:#dedede; 
    padding:5px; 
    -webkit-box-shadow: inset 7px 0 10px -5px rgba(0,0,0,0.3); 
    -moz-box-shadow: inset 7px 0 10px -5px rgba(0,0,0,0.3); 
    box-shadow: inset 7px 0 10px -5px rgba(0,0,0,0.3); 
} 

.block .block-title span{ 
    color:#333; 
    font-size:14px; 
    text-align:center; 
} 

.block .block-content{ 
    padding:10px; 
} 

他にも同様の回答が掲載されていますが、これはよりエレガントでわかりやすいと思います。