只顯示一邊的陰影部分

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>