根据 Figma，背景图像源无法使用线性渐变

Question

我正在尝试在容器上实现一个漂亮的线性渐变边框。但是，它不是在打球，边框只是出现在左下角，左上角，右上角，右下角的一个小方块中。实际上并未出现在整个边框周围。

下面是css代码：

.blur > .elementor-column-wrap {
    background-color: rgba(255, 255, 255, 0.12);
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
    border: 1px solid;
    border-image-source: linear-gradient(
        310.55deg, 
        rgba(255, 255, 255, 0) 29.24%,
        rgba(255, 255, 255, 0.6) 97.14%
    );
}

@supports ( backdrop-filter: blur(5px) ) or ( -webkit-backdrop-filter: blur(5px) )  {
    .blur > .elementor-column-wrap {
        -webkit-backdrop-filter: blur(5px);
        backdrop-filter: blur(5px);
    }
}

@supports not ( backdrop-filter: blur(5px) ) and ( -webkit-backdrop-filter: blur(5px) ) {
    .blur > .elementor-column-wrap {
        background-color: rgba(255, 255, 255, 0.82);
    }
}

知道为什么这不起作用请告诉我们，边框代码也是直接从 Figma 中获取的，作为“推荐”代码使用，但显然它在用例方面存在一些问题。

当前显示边框的下图：

Answer 1

你需要定义border-image-slice

.box {
   width:200px;
   height:200px;
   background-color: rgba(255, 255, 255, 0.12);
   box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
   border: 10px solid;
   border-image-source: linear-gradient(
        310.55deg, 
        rgba(255, 255, 255, 0) 29.24%,
        rgba(255, 255, 255, 0.6) 97.14%
    );
   border-image-slice: 10;
}


body {
 background:pink;
}

<div class="box">

</div>

相关：https://stackoverflow.com/a/56915094/8620333