CSS漸變（背景和邊框）

Question

我正在嘗試使用漸變背景和漸變邊框設置<a>標簽的樣式。

我在網上跟蹤了一個教程並用正確的顏色調整了它，然后意識到它需要設置background-image屬性以便為邊框賦予漸變。

.btn-primary {
    background-color: blue;
    background-image: linear-gradient(to bottom, #f7931e 0%, #f15a24 100%), linear-gradient(to bottom, #f7931e 0%, #f15a24 100%);
    background-position: 0 0, 100% 0;
    background-repeat: no-repeat;
    background-size: 10% 100%;
    border-bottom: 4px solid #f15a24;
    border-top: 4px solid #f7931e;
    box-sizing: border-box;
    margin: 50px auto;
}

有沒有辦法可以修改代碼，以便我可以為按鈕的背景指定不同的漸變？

Answer 1

你可以使用border-image作為邊框，只需使用background-image作為背景漸變。 像這樣：

  .btn-primary { background-color: blue; background-image: linear-gradient(to bottom, #f7931e 0%, #f15a24 100%), linear-gradient(to bottom, #f7931e 0%, #f15a24 100%); background-position: 0 0, 100% 0; background-repeat: no-repeat; background-size: 10% 100%; border-bottom: 4px solid #f15a24; border-top: 4px solid #f7931e; box-sizing: border-box; margin: 50px auto; border-image: linear-gradient(to left, #f7931e 0%, #f15a24 100%), linear-gradient(to bottom, #f7931e 0%, #f15a24 100% } 

Answer 2

您可以將規則應用於偽元素：before或：after然后將偽元素放在錨點上。

如何添加偽元素漸變效果

希望有所幫助！

Answer 3

這是一種使用多個背景漸變創建漸變邊框錯覺的方法：

 .btn-primary { display:inline-block; padding:80px; background: linear-gradient(to bottom, transparent 0, transparent 30px, blue 30px, white calc(100% - 30px), transparent calc(100% - 30px), transparent 100%), linear-gradient(to left, red 0%, yellow 100%); background-repeat: no-repeat; background-position: 30px 0, 0 0; background-size: calc(100% - 60px), auto; } 

 <a class="btn-primary">test</a>