Question

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

从下面的示例和fiddle中可以看出，我尝试过的方法涉及使用渐变边框图像，边框图像开始将阴影移动到内容框外部，以及边框宽度仅显示底部边缘。

不可否认，我不太了解边界图像，特别是在使用线性渐变时。通过反复试验，我取得了令人满意的结果。但事实证明，当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;

＆＃13;

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

＆＃13;

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

＆＃13;

此链接可以帮助您进行边框成像https://css-tricks.com/understanding-border-image/

如何使用border-image和linear-gradient模拟基本阴影？

1 个答案: