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

Question

此处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;

Answer 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}