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

Question

我正在嘗試創建一個效果，其中我的DIV對象的邊框具有水平的從左到右的漸變漸變。 漸變的透視必須包含所有邊界（不僅僅是頂部和底部）

到目前為止我遇到的所有文檔都描述了如何垂直地完成它

謝謝

Answer 1

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

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

Answer 2

所有其他答案剛剛指向一個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-Tricks上了解有關CSS漸變的更多信息。

Answer 3

Photoshop中

但是看看這個，它可能只是為你做的技巧（加上它的GUI）

Colorzilla