试试这个：

.btn-gradient-1 {
  width: 100px;
  height: 40px;
  border: double 4px transparent;
  border-radius: 40px;
  background-image: linear-gradient(white, white), radial-gradient(circle at top left, #f00, #3020ff);
  background-origin: border-box;
  background-clip: padding-box, border-box;
}

.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: black;
}

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

对于background，我使用了linear gradient和radial gradient的组合。background-origin和background-clip属性用于指定linear gradient应该只填充按钮的padding区域，而radial gradient应该填充border区域。我将我的样式应用于第一个button。

要添加透明度，我们使用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>