有没有办法用 CSS 边框创建水平渐变？答案

【问题标题】：Is there any way to create horizontal gradients with CSS borders?有没有办法用 CSS 边框创建水平渐变？
【发布时间】：2012-04-16 17:17:41
【问题描述】：

我正在尝试创建一种效果，其中我的 DIV 对象的边框具有从左到右的水平渐变渐变效果。渐变的透视必须包含所有边框（不仅仅是顶部和底部）

到目前为止我遇到的所有文档都描述了如何垂直进行

谢谢

【问题讨论】：

标签： html css border gradient

【解决方案1】：

所有其他答案都只是将您指向 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 渐变的更多信息。

【讨论】：

【解决方案2】：

Colorzilla 允许您使用 CSS 生成渐变 - 不涉及图形文件。它还可以在许多浏览器中可靠运行。

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

【讨论】：

+1 因为这是一个出色的工具。但是请记住，边界内的渐变（如问题中所述）不像常规背景渐变那样完全跨浏览器。
谢谢！我不知道。

【解决方案3】：

Photoshop

但是看看这个，它可能对你有用（加上它的 GUI）

Colorzilla

【讨论】：