只显示一边的阴影部分

Question

所以我有一个标题显示在下面的代码片段中。

我的问题是我只想要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>

Answer 1

这里是box-shadow语法，

box-shadow: offset-x | offset-y | blur-radius | spread-radius | color 

尝试减少它的spread-radius，并增加其对y-axis阴影。

* { 
 
    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>

Answer 2

您可以通过CSS pseudo元素得到它。

只需添加CSS部分

a:after { 
    content:''; 
    position:absolute; 
    bottom:0px; 
    left:0px; 
    height:20px; 
    display:block; 
    width:100%; 
    box-shadow:5px 5px 5px -5px #000000; 
} 
a:before { 
    content:''; 
    position:absolute; 
    bottom:0px; 
    left:0px; 
    height:20px; 
    display:block; 
    width:100%; 
    box-shadow:-5px 5px 5px -5px #000000; 
} 

* { 
 
    padding: 0; 
 
    margin: 0; 
 
    box-sizing:border-box; 
 
} 
 

 
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; 
 
    /* box-shadow:0px 5px 5px -5px #000000; */ 
 
} 
 
a:after { 
 
    content:''; 
 
    position:absolute; 
 
    bottom:0px; 
 
    left:0px; 
 
    height:20px; 
 
    display:block; 
 
    width:100%; 
 
    box-shadow:5px 5px 5px -5px #000000; 
 
} 
 
a:before { 
 
    content:''; 
 
    position:absolute; 
 
    bottom:0px; 
 
    left:0px; 
 
    height:20px; 
 
    display:block; 
 
    width:100%; 
 
    box-shadow:-5px 5px 5px -5px #000000; 
 
} 
 
img { 
 
    height: 100%; 
 
}

<div> 
 
    <a href="#"> 
 
    <img src="https://via.placeholder.com/200x100"> 
 
    </a> 
 
</div>

Answer 3

编辑： -

使用jQuery你可以计算跨度的CSS动态。 Check this.

的Html修改，添加如下锚标记一个<span>并添加阴影跨度

* { 
 
    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;*/ 
 
    z-index:100; 
 
    position:absolute; 
 
} 
 

 
.shadow { 
 
    display: inline-block; 
 
    margin-left: 30px; 
 
    padding: 10px; 
 
    margin-top:50px; 
 
    height: 10px; 
 
    width:120px; 
 
    background: white; 
 
    box-shadow: 0px 0px 5px #000000; 
 
    z-index:0; 
 
    position:absolute; 
 
} 
 

 
img { 
 
    height: 100%; 
 
}

<div> 
 
    <a href="#"> 
 
    <img src="https://via.placeholder.com/200x100"> 
 
    </a> 
 
    <span class="shadow">r 
 
    </span> 
 
</div>