有没有什么办法用CSS边框创建水平渐变？

我想创建一个效果，其中我的DIV对象的边框有一个水平的从左到右渐变渐变。渐变的角度来看，必须涵盖所有边界（不只是顶部和底部）有没有什么办法用CSS边框创建水平渐变？

所有我碰上了到目前为止介绍如何做到这一点垂直

感谢

来源

2012-04-16 user1279153

的Photoshop

但检查的文档这一点，它可能只是做的伎俩你（加上其GUI）

Colorzilla

来源

2012-04-16 17:23:23

Colorzilla允许您使用CSS生成渐变 - 不涉及任何图形文件。它也可以在许多浏览器中可靠地工作。

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

来源

2012-04-16 17:25:02 dangerChihuahua007

+1因为这是一个很好的工具。但请记住，边框内的渐变（如问题中指定的）不像普通背景渐变那样完全跨浏览器。 – Spudley 2012-04-16 20:58:53

谢谢！我不知道。 – dangerChihuahua007 2012-04-16 21:17:31

所有其他的答案刚才所说，你的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。

来源

2014-08-12 19:28:15

有没有什么办法用CSS边框创建水平渐变？

回答

相关问题