盒子影子溢出亲子

我创建了一个带有插入阴影的边栏块。我希望阴影出现在.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

盒子影子溢出亲子

回答

相关问题