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

Question

我想使用 border-image 和 linear-gradient 来模拟阴影效果（出于滚动性能的原因，我没有使用原生的框阴影效果）。

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

诚然，我不太了解 border-image，尤其是在将其与线性渐变一起使用时。通过反复试验，我得到了一个似乎令人满意的结果。但事实证明，当 div 的宽度足够短时，"shadow" 就会完全消失。

我可以做些什么来实现像顶框一样的投影，但无论框大小如何都可以？非常感谢您的帮助！

.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>

这个link可能对你的边界成像有一点帮助https://css-tricks.com/understanding-border-image/

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

How can I simulate a basic drop shadow using border-image and linear-gradient?

html

css

border-image