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上的阴影，这样你就可以看到真正的死亡。

css边界图像渐变解决方案

1 个答案:

fiddle