一边是CSS边框图像渐变？

2023年8月26日 271次阅读

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

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

<div></div>

如何仅将渐变应用于左侧？

最佳答案您可以轻松地在所有其他边上定义边框宽度.问题源于默认的
border-width (MDN)值为中,而不是0.

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

<div></div>