想让边框颜色从内向外渐变？

Question

border-top: 3px solid #385feb !important;想让边框颜色渐变

border-top-color: linear-gradient(red, green, blue)没效果

Answer 1

需要使用 border-image 而不是单纯设置 border-color

CSS实现渐变色边框（Gradient borders）的5种方法 - 半路出家老菜鸟 - SegmentFault 思否

Answer 2

前面大佬已经说了需要 border-image，另外好像 圆角的话就不支持渐变了

Answer 3

CSS 不直接支持使用 border-color 属性创建渐变边框。不过，你可以使用 border-image 属性或伪元素来实现渐变边框效果。以下是两种方法：
方法一：使用 border-image
CSS

.element {
border: 3px solid;
border-image: linear-gradient(to right, red, green, blue) 1;
}

这种方法使用 border-image 属性为边框应用渐变效果。

方法二：使用伪元素
CSS

.element {
position: relative;
padding: 10px;
}

.element::before {
content: '';
position: absolute;
top: -3px;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(to right, red, green, blue);
z-index: -1;
}

这种方法使用伪元素创建渐变边框。

Answer 4

<style>
.button{
background-image: linear-gradient(45deg, #fff, #fff), linear-gradient(139deg, rgb(251, 136, 23), rgb(255, 75, 1), rgb(193, 33, 39), rgb(224, 42, 255));
        border: 2px solid transparent;
        background-clip: padding-box, border-box;
        background-origin: border-box, border-box;
        background-color: rgba(0, 0, 0, 0.2);
        display: inline-block;
        padding: 2px 10px;
        border-radius: 5px;
}
</style>
<a class="button">test</a>