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

Question

我希望我的 <div> 有一个底部边框，它从左边一段距离开始。就像：

abc
  ^^^^^^^^^^

其中^代表一块边框。

我使用 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-shadow

实现

如果您对 div 使用 display: flex，则应使用 position: absoute

定位伪 after 元素

看这个例子：

body {
      background-color: lightgreen;
    }
    div { 
    display: flex;
    position: relative;
    
    }
    div:after {
      content: "";
      position: absolute;
      bottom: 0;
      left: 0;
      display: block;
      width: 200px;
      height: 1px;
      box-shadow: 10px 1px 0 0 lightgray, 10px 2px 0 0 white;
    }

<div>abc</div>
<div>edf</div>

Answer 2

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

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

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

How do I use gradient image which gradates in both directions as border-image?

css

linear-gradients

border-image