1

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

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

4

1 回答 1

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/

于 2016-10-07T13:25:21.447 回答