转换为CSS3梯度

Question

我刚开始使用CSS3 (特别是梯度)。如何将以下HTML/CSS编码边框转换为基于CSS 3的梯度(即不使用图像)

我想将从转换成

​

普通CSS边框/背景色

到

​

梯度盒

宽度/高度大约在上面的img .我需要知道如何得到第二图中的梯度？

Answer 1

没有看到你正在使用的颜色，你想做这样的事情

.class{
    background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#000));
    background: -moz-linear-gradient(top, #fff, #000);
}

以下是一个可能会有所帮助的工具：

http://gradients.glrzad.com/

Answer 2

这个链接应该能帮你。您将在那里找到渐变的语法。

这款浏览器适用于所有主流浏览器：

  background-color: #444444;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#444444), to(#999999)); 
  background-image: -webkit-linear-gradient(top, #444444, #999999); 
  background-image:    -moz-linear-gradient(top, #444444, #999999); 
  background-image:     -ms-linear-gradient(top, #444444, #999999); 
  background-image:      -o-linear-gradient(top, #444444, #999999); 
  background-image:         linear-gradient(to bottom, #444444, #999999);
            filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#444444', EndColorStr='#999999');

…而#444444是渐变顶部的颜色，#999999是底部的渐变颜色.

不同的“供应商前缀”确保梯度作为‘默认’语法在不同的浏览器中工作，到目前为止并不是每个浏览器都支持。filter-property将使渐变在Internet 8及以下版本中工作。但是这也有一些缺点(性能和…)。必要的话就用它吧。

编辑：线性梯度的语法发生了变化.规范的语法：

background-image: linear-gradient(to bottom, #444444, #999999);

我在上面也改变了这个，所以每个人都可以复制这个。

Answer 3

最适合看的地方如下：

CSS3梯度