如何使用边框图像和线性渐变模拟基本投影？

Question

我想使用边框图像和线性渐变来模拟阴影效果（出于滚动性能的原因，我没有使用原生的盒子阴影效果）。

从下面的示例和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/