转换为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及更低版本中有效。但这有一些缺点（表现为......）。如果真的有必要，请使用它。

编辑：线性渐变的语法已更改。 spec'd语法：

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

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

Answer 2

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

.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 3

最佳观看地点如下：

CSS3 Gradients

Answer 4

CSS渐变是很酷的东西。 但是你有一个问题。当你在ie9中使用背景渐变时。你不能使用border radius是其他CSS3。 ie的背景过滤器属性很糟糕。我有一个更好的解决方案。这解决了ie9中的问题。

使用此工具可以创建渐变：http://www.colorzilla.com/gradient-editor/ 使用此工具，您可以为ie9创建一个SVG：http://ie.microsoft.com/testdrive/graphics/svggradientbackgroundmaker/default.html

现在我们有了这段代码：

background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPgo8bGluZWFyR3JhZGllbnQgaWQ9Imc1OCIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMTAwJSIgeTI9IjEwMCUiPgo8c3RvcCBzdG9wLWNvbG9yPSIjNDQ0NDQ0IiBvZmZzZXQ9IjAiLz48c3RvcCBzdG9wLWNvbG9yPSIjOTk5OTk5IiBvZmZzZXQ9IjEiLz4KPC9saW5lYXJHcmFkaWVudD4KPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNnNTgpIiAvPgo8L3N2Zz4=);
background: #444444; /* Old browsers */
background: -moz-linear-gradient(top, #444444 0%, #999999 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#444444), color-stop(100%,#999999)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #444444 0%,#999999 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #444444 0%,#999999 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #444444 0%,#999999 100%); /* IE10+ */
background: linear-gradient(top, #444444 0%,#999999 100%); /* W3C */