一侧的 CSS 边框图像渐变？

Question

以下 CSS 在元素的左侧和右侧生成渐变边框:

div {
    width: 100px;
    height: 100px;
    border-left: 10px solid;
    border-image: linear-gradient(#00f,#000) 0 100%;
}

<div></div>

http://jsfiddle.net/5p8cv5t9/

如何只在左侧应用渐变？

Answer 1

您可以轻松地在所有其他边上定义无边框宽度。问题源于以下事实:默认 border-width (MDN)值为 medium，而不是 0。

div {
    width: 100px;
    height: 100px;
    border-width: 0;
    border-left: 10px solid;
    border-image: linear-gradient(#00f, #000) 0 100%;
}

<div></div>