我有以下CSS:

a.btn.white-grad {
    background: $lgrey;
    color: #313149 !important;
    border: 1px solid #000;
    border-image-source: linear-gradient(to right, #9c20aa, #fb3570);
    border-image-slice: 20;
    float: left;
    @include font-size(26);
    margin: 75px 0;
}

添加border-radius: 5px似乎沒有任何作用。我想這是因為我使用了邊框漸變...到底有沒有辦法讓我達到想要的5px邊框半徑？

2021:我推薦使用CSS mask方法，因為現在支持已經很好了

您不能對漸變使用邊框半徑。這里有另一個想法，你可以依靠多重背景和調整背景剪輯:

.white-grad {
  background: 
    linear-gradient(#ccc 0 0) padding-box, /*this is your grey background*/
    linear-gradient(to right, #9c20aa, #fb3570) border-box;
  color: #313149;
  padding: 10px;
  border: 5px solid transparent;
  border-radius: 15px;
  display: inline-block;
  margin: 75px 0;
}

<div class="white-grad"> Some text here</div>

<div class="white-grad"> Some long long long text here</div>

<div class="white-grad"> Some long long <br>long text here</div>

您需要將按鈕包裝在一個div中，并在父div上設置邊框半徑。為了工作，您還必須將overflow:hidden設置為父div。像這樣:

.btn-wrap {
    border-radius: 5px;
    overflow: hidden;
    margin: 20px;
    width: 60px;
}
a.btn.white-grad {
    background: #eee;
    color: #313149 !important;
    border: 20px solid #000;
    border-image-source: linear-gradient(to right, #9c20aa, #fb3570);
    border-image-slice: 20;
    line-height: 2;
}

<div class="btn-wrap">
		<a href="#" class="btn white-grad">link</a>
	</div>

這不是我的功勞，我是在一個網站上看到的(我忘記了網站，再也找不到了)。

這只是一個普通的按鈕，有圓形邊緣和漸變背景 它使用一個嵌入的盒子陰影來填充白色 它有一個2px的邊框，實際上是透明的，所以按鈕的邊緣可以顯示出來

body {
  background: aliceblue;
}

.gradient-border {  
  border-radius: 24px;
  padding: 6px 12px;
  background-image: linear-gradient(90deg, red 0%, blue 100%);
  /* Fill the inside with white */
  background-origin: border-box;
  box-shadow: inset 0 1000px white;
  /* A transparent border, so the very edge of the button shows through */
  border: 2px solid transparent;
}

<button class="gradient-border">Hello</button>