背景图像源不按照 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 中获取作为 'recommended' 使用的代码，但显然它在用例方面存在一些问题。

当前显示边框的下图：

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>

背景图像源不按照 Figma 使用线性渐变

background-image-source not working with linear-gradient as per Figma

css

linear-gradients

border-image