border-left-image和border-right-image與邊框顏色混合的CSS邊框圖像漸變

Question

是#9b9c9d和border-bottom-color是#f6f9fc。梯度爲，意圖爲以將頂部顏色轉換爲border-left和border-right上的底部顏色。

如何混合border-left-image和border-right-image與和border-bottom-color？

HTML

<a class="button-style">Evil Whales</a> 

CSS

.button-style 
{ 
background: linear-gradient(to bottom, 
    rgba(129,232,117,1) 0%, 
    rgba(129,232,117,1) 50%, 
    rgba(62,179,48,1) 51%, 
    rgba(62,179,48,1) 100%); 

border-top-color: #9b9c9d; 

border-left-image: linear-gradient(to bottom, 
    rgba(155,156,157,1) 0%, 
    rgba(246,249,252,1) 100%); 

border-bottom-color: #f6f9fc; 

border-right-image: linear-gradient(to bottom, 
    rgba(155,156,157,1) 0%, 
    rgba(246,249,252,1) 100%); 

border-style: solid; 
} 

Answer 1

得到它雖然只是在Chrome，Firefox和IE瀏覽器不工作的工作。

background: linear-gradient(to bottom, 
    rgba(129,232,117,1) 0%, 
    rgba(129,232,117,1) 50%, 
    rgba(62,179,48,1) 51%, 
    rgba(62,179,48,1) 100%); 
border-image: linear-gradient(to bottom, 
    rgba(155,156,157,1) 0%, 
    rgba(246,249,252,1) 100%) 25 30 10 20 repeat; 
border-image-repeat: stretch; 
border-width: 4px; 

應該指出的是，沒有border-left-image和相關的屬性;不幸的是沒有一個更好的文檔CSS屬性。

Answer 2

可在堆疊2梯度和使用background-size，padding & background-clip繪製border。

.button-style { 
 
    background: linear-gradient(to bottom, rgba(129, 232, 117, 1) 0%, rgba(129, 232, 117, 1) 50%, rgba(62, 179, 48, 1) 51%, rgba(62, 179, 48, 1) 100%) no-repeat 
 
    /* use for background */ 
 
    , linear-gradient(to bottom, rgba(155, 156, 157, 1) 0%, rgba(246, 249, 252, 1) 100%) 
 
    /* use for border */ 
 
    ; 
 
    background-size: 100% 100%, auto auto; 
 
    background-clip: content-box, border-box; 
 
    padding: 3px; 
 
} 
 
html { 
 
    padding: 3em; 
 
    background: gray;

<a class="button-style">Evil Whales</a>