一边是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。

＆＃13;

＆＃13;

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

＆＃13;

<div></div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您可以将右边框定义为0px。希望这会有所帮助。

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