当前位置：文江博客话题详情

转换为 CSS3 渐变

发布于 2024-12-10 06:31:15 字数 329 浏览 0 评论 0原文

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

我想要转换 FROM

普通 CSS 边框/背景颜色

在此处输入图像描述具有渐变宽度/高度的框

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

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

怕倦 2024-12-17 06:31:15

此链接应该对您有帮助。您将在那里找到渐变的语法。

这适用于所有主要浏览器：

  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 及更低版本中起作用。但这有一些缺点（性能也……）。如果确实有必要的话就使用它。

编辑：线性渐变的语法已更改。规范语法：

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

我也更改了上面的内容，所以每个人都可以复制它。

This link should help you. You will find the syntax for gradients there.

It's this one for all the major browsers:

  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');

…while #444444 is the color at top of the gradient and #999999 the gradient-color at the bottom.

The different "vendor-prefixes" ensure that the gradient works in different browsers as the 'default'-syntax is not supported by every browser by now.
The filter-property will make the gradient work in Internet Explorer 8 and below. But this has some drawbacks (performance aso…). Just use it if really necessary.

Edit: The syntax for linear-gradient changed. The spec'd syntax:

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

I've changed this above too, so everyone can just copy this.

回复收藏 0 原文

感情旳空白 2024-12-17 06:31:15

在看不到您正在使用的颜色的情况下，您想做这样的事情

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

这里有一个可能有帮助的工具：

http://gradients .glrzad.com/

Without seeing the colors you are working with, you want to do something like this

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

Here's a tool that might help:

http://gradients.glrzad.com/

回复收藏 0 原文

谎言 2024-12-17 06:31:15

最佳查看位置如下：

CSS3 渐变

回复收藏 0 原文

柳若烟 2024-12-17 06:31:15

CSS 渐变是很酷的东西。 但是你有一个问题。当你在ie9中使用背景渐变时。你不能使用其他 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 */

CSS gradients are cool stuff. But you have one problem. When you are used background gradients in ie9. You can not used border radius are other CSS3. The background filter propertiy for ie is suck. I have a better solution for this. That fix the problem in ie9.

With this tool you create a gradient: http://www.colorzilla.com/gradient-editor/
And with this tool you create a SVG for ie9: http://ie.microsoft.com/testdrive/graphics/svggradientbackgroundmaker/default.html

Now we have this code:

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 */

回复收藏 0 原文

~没有更多了~