css边框图像渐变解决方案

Question

我四处搜索了一下，但找不到我想要的使用方式的解决方案。

我的渐变将是带白色中心的顶部/底部边界，反射的不透明度为0%。给人一种你经常看到的效果。

border-image: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,0)), color-stop(49%,rgba(255,255,255,1)), color-stop(100%,rgba(255,255,255,0)));

但我似乎无法让它发挥作用，有什么想法吗？除了在div的上方和下方添加手动图像之外，我想不出其他方法了，这似乎是一种糟糕的方法。

Answer 1

我认为你想要做的是这个

.test {
    position: absolute;
    left: 20px;
    top: 20px;
    width: 200px;
    height: 200px;
    border-style: solid;
    border-width: 20px 0px;
    border-image-source: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,1), rgba(255,255,255,0));
    border-image-slice: 20;
    border-image-repeat: stretch;
    box-shadow: 0px 0px 10px black;
}
body {
    background-color: lightblue;
}

我只使用了不固定的语法；它将在Chrome中正常工作。你可以使用速记符号，但我认为这种方式更容易理解它的工作原理。

我还在主体上设置了背景（如果没有，很难区分白色和透明），并在div上设置了阴影，这样你就可以看到真实的死亡。

小提琴