css - 如何使用在两个方向上渐变的渐变图像作为边框图像？

Question

我想要我的 <div>有一个从左边一定距离开始的底部边框。就像:

abc
  ^^^^^^^^^^

哪里^代表一 block 边框。

我使用 border-image 实现了这一点.我设置了 border-image到 linear-gradient()图像，开始是透明的，然后从一些像素变成灰色。

<style>
    div {
        width: 200px;
        border-top-style: none;
        border-bottom-style: solid;
        border-width: 1px;
        border-image: linear-gradient(to right,
            transparent 0,
            transparent 1em,
            lightgray 1em,
            lightgray 100%) 100% 1;
    }
</style>
<div>abc</div>

现在的新要求是在现有线条的正下方添加一条 1px 的白线，以模拟 3d 效果。我以为我可以简单地向边框图像添加垂直渐变，但我不知道该怎么做。

Answer 1

考虑多个背景而不是边框​​。我使用了不同的颜色来更好地查看结果:

.box {
  width: 200px;
  background: 
    linear-gradient(blue, blue) 1em 100%/ 100% 1px no-repeat,
    linear-gradient(red, red)   1em 100%/ 100% 2px no-repeat;
}

<div class="box">abc</div>