盒子影子溢出親子

我創建了一個帶有插入陰影的邊欄塊。我希望陰影出現在.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; 
}

來源

2017-08-01 Daniels Jirgensons

你想做什麼？你的第一句話有點混亂。 – DMrFrost

您可以簡單地將相同的陰影應用於'.block-title' – Kangouroops

你可以把盒子陰影使用絕對定位僞元素孩子的頂部（::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>

來源

2017-08-01 11:44:18

這到底是怎麼發生的是.block-title被覆蓋的陰影效果。如果您添加了opacity或給了color一個rgba值，您可以使效果顯得更多一點。

我改變十六進制顏色爲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; 
}

來源

2017-08-01 11:55:45 RMo

或者，您可以在.block-title元素上應用合適的陰影。 – RMo

最直接的解決方案，我可以看到的是還添加框陰影給你的頭銜，看看他回覆：

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; 
}

其他人發佈了類似的答案，但我相信這是更優雅和容易理解。

來源

2017-08-01 11:59:08 Kodaloid

盒子影子溢出親子

回答

相關問題