我如何使用边界图像和线性梯度模拟一个基本的投影

Question

我想用border-image和linear-gradient来模拟投影效果(考虑到滚动性能，我没有使用原生的box-shadow效果)

从下面的例子中可以看出，我尝试的方法包括使用border-image作为渐变，使用border-image-outset将阴影移出内容框，使用border-width仅显示底部边缘。

无可否认，我不太理解border-image，特别是当它与线性梯度一起使用时。经过反复试验，我取得了似乎令人满意的结果。但事实证明，当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/