有沒有什麼辦法用CSS邊框創建水平漸變？

Question

我想創建一個效果，其中我的DIV對象的邊框有一個水平的從左到右漸變漸變。漸變的角度來看，必須涵蓋所有邊界（不只是頂部和底部）

所有我碰上了到目前爲止介紹如何做到這一點垂直

感謝

Answer 1

的Photoshop

但檢查的文檔這一點，它可能只是做的伎倆你（加上其GUI）

Colorzilla

Answer 2

Colorzilla允許您使用CSS生成漸變 - 不涉及任何圖形文件。它也可以在許多瀏覽器中可靠地工作。

http://www.colorzilla.com/gradient-editor/

Answer 3

所有其他的答案剛纔所說，你的CSS發電機。

儘管Colorzilla在應用供應商前綴方面做得很好，但它的核心CSS非常簡單。儘管如此，我相信在這種情況下，您可以通過使用僞元素而不是邊界來獲得更好的跨瀏覽器兼容性。這就是我要做的事：

開始用一個簡單的div：

<div class="top-gradient-border"> 
    Lorem ipsum 
</div> 

基本CSS：

.top-gradient-border { 
    width: 200px; 
    height: 30px; 
    /*other irrelevant styling in here*/ 
} 

添加漸變色的邊框（這個例子展示瞭如何做到這一點的border-top ，改變其他方面的僞元素）：

.top-gradient-border::before { 
    content: ""; 
    background-image: linear-gradient(to right, white, black); 
    height: 1px; /*for horizontal border; width for vertical*/ 
    display: block; 
} 

你可以瞭解更多關於CSS畢業生客戶在CSS-Tricks。