css border-image渐变解决方案

Question

我四处搜索，但找不到适合我希望使用它的方式的解决方案。

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

border-image: -webkit-gradient(线性, 左上角, 右上角, color-stop(0%,rgba(255,255,255,0)), color-stop(49%,rgba(255,255,255,1) )), 颜色停止(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 中一样工作。你可以使用速记符号，但我认为这种方式更容易理解它是如何工作的。

我还在body上设置了背景(如果没有，很难区分白色和透明)和div上的阴影，这样你就可以看到真实的diemnsions。

fiddle