-webkit-border-image: -webkit-linear-gradient 仅用于左边框答案

【问题标题】：-webkit-border-image: -webkit-linear-gradient only for left border-webkit-border-image: -webkit-linear-gradient 仅用于左边框
【发布时间】：2017-05-20 01:31:10
【问题描述】：

这里是 CSS：

-webkit-border-image: -webkit-linear-gradient(top, transparent, #f9f9f9 20%, #f9f9f9 80%, transparent) 0 0 0 1;

它不显示为：

如何实现

border-image: -webkit-linear-gradient(top, transparent, #f9f9f9 20%, #f9f9f9 80%, transparent) 0 0 0 1;

【问题讨论】：

border-width: 0; border-left-width: 5px; 呢？
不，没有结果。
寻求帮助的问题（“为什么此代码不起作用或如何使该代码起作用？”）必须包括所需的行为、特定问题或错误以及在问题本身中重现它所需的最短代码。没有明确的问题陈述的问题对其他读者没有用处。请参阅：How to create a Minimal, Complete, and Verifiable example。
这可以（很可能）以另一种方式完成......跨浏览器工作，所以如果你发布代码我可能会提供帮助
>LGSon 这里code

标签： html css safari webkit

【解决方案1】：

让它像 2 absolute 和 inline-block 的：

CSS

.menu {
    position: absolute;
    display: inline-block;
    margin-left: 100px;
}
.menu:before {
    content: " ";
    display: inline-block;
    position: absolute;
    height: 100%;
    border-left: 1px solid;
    border-image: linear-gradient(to top, transparent, #f9f9f9 20%, #f9f9f9 80%, transparent) 0 0 0 1;
    border-image: -webkit-linear-gradient(top, transparent, #f9f9f9 20%, #f9f9f9 80%, transparent) 0 0 0 1;
    border-image: -moz-linear-gradient(top, transparent, #f9f9f9 20%, #f9f9f9 80%, transparent) 0 0 0 1;
    -webkit-border-image: -webkit-linear-gradient(top, transparent, #f9f9f9 20%, #f9f9f9 80%, transparent) 0 0 0 1;
}

{Full code}

【讨论】：