如何创建具有线性渐变边框，圆角和透明背景的按钮?

Question

我想创建线性渐变边框，圆角和透明背景.

我:

.btn-gradient-1 {
border-width: 4px;
border-style: solid;
border-image: linear-gradient(to right, darkblue, darkorchid) 1;
}
.btn-gradient-2 {
background: linear-gradient(white, white) padding-box, linear-gradient(to right, darkblue, darkorchid) border-box;
border-radius: 50em;
border: 4px solid transparent;
}
.parent {
display: flex;
flex-wrap: wrap;
gap: 1rem;
background-color: red
}

<div class="parent">
<button class="btn-gradient-1">Button One</button>
<button class="btn-gradient-2">Button Two</button>
</div>

问题是linear-gradient不接受transparent的颜色值。有黑客吗?按钮必须有透明的背景.

https://jsfiddle.net/c3ogjrzh/

Answer 1

为了增加透明度，我们使用rgba()函数来定义颜色停止。rgba()函数的最后一个参数取值范围为0 ~ 1，它定义了颜色的透明度:0表示全透明，1表示全彩色(不透明)。

您的透明度将从darkblue(0 0 153)开始到darkorchid(153 50 204)

linear-gradient(to right, rgba(0,0,153,0), rgba(153,50,204,1)) 

.btn-gradient-1 {
border-width: 4px;
border-style: solid;
border-image: linear-gradient(to right, darkblue, darkorchid) 1;
}

.btn-gradient-2 {
background: linear-gradient(white, white) padding-box,
linear-gradient(to right, rgba(0,0,153,0), rgba(153,50,204,1)) border-box;
border-radius: 50em;
border: 4px solid transparent;
}

.parent {
display: flex;
flex-wrap: wrap;
gap: 1rem;
background-color: red
}

<div class="parent">
<button class="btn-gradient-1">Button One</button>
<button class="btn-gradient-2">Button Two</button>
</div>