html - 转换为 CSS3 渐变

Question

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

我想转换FROM

普通 CSS 边框/背景颜色

到

渐变框

宽度/高度大约在上面的 img 中...我需要知道如何根据第二张图获得渐变？

Answer 1

This link应该帮助你。您会在那里找到渐变的语法。

这是适用于所有主要浏览器的:

  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 属性将使渐变在 Internet Explorer 8 及以下版本中工作。但这有一些缺点(性能也……)。如果确实需要，请使用它。

编辑: linear-gradient 的语法已更改。规范语法:

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

上面这个我也改了，大家照着抄就可以了。