我正在创建一个带有插入阴影的侧边栏 block 。我希望阴影出现在 .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;
}
最佳答案
您可以使用绝对定位的伪元素 (::before
) 将框阴影设置在子元素的顶部。在伪元素上使用 pointer-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>
关于html - 盒子阴影溢出父级,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45436841/