如何使用邊框圖像和線性漸變模擬基本投影？

Question

我想使用 border-image 和 linear-gradient 模擬投影效果（出於滾動性能的原因，我沒有使用原生的 box-shadow 效果）。

從下面的示例和fiddle 中可以看出，我嘗試的方法包括使用 border-image 漸變，使用 border-image-outset 將陰影移到內容框外，使用 border-width 僅顯示底部邊緣。

誠然，我不太了解邊框圖像，尤其是在將其與線性漸變一起使用時。 通過反復試驗，我取得了似乎令人滿意的結果。 但事實證明，當 div 的寬度足夠短時，“陰影”就會完全消失。

我能做些什么來實現像頂盒一樣的陰影，但不管盒子大小如何都可以使用？ 非常感謝您對此的幫助！

 .box { /* the "shadow" */ border-image: linear-gradient(to bottom, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.5) 10%, rgba(0,0,0,0) 100%) 100 repeat; border-image-outset: 0px 0px 6px 0px; border-width: 0px 0px 6px 0px; border-style: solid; /* other stuff */ font-family: sans-serif; font-size: 20px; color: #FEFEFE; background: #007277; margin: 10px 0px; float: left; clear: left; padding: 50px; }

 <div class="box"> Here's longer text, where the "shadow" appears how I want it to. </div> <div class="box"> Short </div>

Answer 1

要使短邊框起作用，您需要更改

100 repeat;

到

0 0 100 0 repeat;

 .box { /* the "shadow" */ border-image: linear-gradient(to bottom, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.5) 10%, rgba(0,0,0,0) 100%) 0 0 100 0 repeat; border-image-outset: 0px 0px 6px 0px; border-width: 0px 0px 6px 0px; border-style: solid; /* other stuff */ font-family: sans-serif; font-size: 20px; color: #FEFEFE; background: #007277; margin: 10px 0px; float: left; clear: left; padding: 50px; }

 <div class="box"> Here's longer text, where the "shadow" appears how I want it to. </div> <div class="box"> Short </div>

此鏈接可能對您的邊界成像有所幫助https://css-tricks.com/understanding-border-image/