有没有办法用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