所以我有一个 header ,显示在下面的代码片段中。
我的问题是我只希望 a
标签周围的阴影显示在已扩展出其容器 div
的部分,以营造白色的印象边都是一个元素。
基本上我只希望左侧和右侧的阴影从 a
元素的底部延伸到 div
的底部。同时还显示在 a
元素的底部。
如果我的描述功能不起作用,我所追求的屏幕截图:
我试过使用 z-index
但没能成功。
我对 z-index
的想法是将 a
推到 div
后面,然后拉动 img
在所有人面前。
我更喜欢纯 CSS 解决方案,因为我不想修改 html,但如果必须的话,我也必须这样做。
* {
padding: 0;
margin: 0;
}
div {
height: 50px;
width: 100%;
background: white;
box-shadow: 0px 0px 5px #000000;
}
a {
display: inline-block;
margin-left: 30px;
padding: 10px;
height: 60px;
background: white;
box-shadow: 0px 0px 5px #000000;
}
img {
height: 100%;
}
<div>
<a href="#">
<img src="https://via.placeholder.com/200x100">
</a>
</div>
最佳答案
这里是box-shadow
语法,
box-shadow: offset-x | offset-y | blur-radius | spread-radius | color
尝试减小它的 spread-radius
并增加它朝向 y 轴
的阴影。
* {
padding: 0;
margin: 0;
}
div {
height: 50px;
width: 100%;
background: white;
box-shadow: 0px 0px 5px #000000;
}
a {
display: inline-block;
margin-left: 30px;
padding: 10px;
height: 60px;
background: white;
position: relative;
}
a:before {
content: "";
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
box-shadow: 0px 0px 5px #000000;
z-index: -1;
}
img {
height: 100%;
}
<div>
<a href="#">
<img src="https://via.placeholder.com/200x100">
</a>
</div>
关于html - 仅在一侧显示框阴影,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44823674/