芒果小站

  1. 全球最具业界良心的主机 - DigitalOcean

    毫无疑问,目前做得最好的主机供应商

    猛击这里查看

  2. 芒果小站目前使用的主机 - DigitalOcean

    客服响应快,随时退款,XEN 架构稳定

    猛击这里查看

  3. 最好的日本东京线路主机 - DigitalOcean

    可选弗里蒙特、达拉斯、亚特兰大、纽瓦克、伦敦、东京机房

    猛击这里查看

  • 1
  • 2
  • 3
切换到精简模式
3

跨浏览器的 CSS 渐变方案

作者 芒果/分类 代码/发布于 2010-04-27 11:33

Webkit 介绍 CSS 渐变特性差不多有两年时间了,但由于与大部分浏览器不兼容的原因,很少实际应用。值得欣慰的是 Firefox 3.6 + 已经支持 CSS 渐变,我们可以通过样式呈现渐变效果,而不必创建一个渐变图像。这篇文章将告诉你如何书写 CSS 渐变代码使其兼容主流浏览器:IE,Firefox 3.6 +,Safari 和 Chromr。此外,尝试更新使用了 CSS 渐变的下拉菜单演示。

Webkit 引擎

以下代码适用于 webkit 引擎的浏览器,如 Safari,Chrome 等。它会从顶部 (#ccc) 到底部 (#000) 呈现一个线性渐变。

background: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#000));

Firefox 3.6+

background: -moz-linear-gradient(top,  #ccc,  #000);

Internet Explorer

以下的滤镜代码只能被 IE 解释执行:

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#000000');

跨浏览器 CSS 渐变(演示

结合将上面的三块代码,就是一个跨浏览器的渐变效果。注:我添加了一个背景颜色以防用户使用的浏览器不支持该功能。

background: #999; /* for non-css3 browsers */

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#000000'); /* for IE */
background: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#000)); /* for webkit browsers */
background: -moz-linear-gradient(top,  #ccc,  #000); /* for firefox 3.6+ */

CSS 渐变下拉菜单

以下是一个使用 CSS3 文字阴影 (text-shadow),圆角 (radius-border),阴影 (box-shadow) 的纯 CSS 渐变下拉菜单,未涉及任何 JavaScript 或 图片。

Internet Explorer 的局限性

IE 的渐变滤镜不支持多重渐变 (color-stop),渐变角度 (gradient angle),径向渐变 (radial gradient)。这意味着你只能使用 StartColorStr 和 EndColorStr 两种颜色指定水平或垂直的线性渐变。

结束语

请注意并不是所有浏览器都支持 CSS 渐变属性。为保证安全,在编码页面布局时不要依赖于 CSS 渐变,它只适合用来加强样式表现。

英文原稿:Cross-Browser CSS Gradient | WebDesignerWall
翻译整理:跨浏览器的 CSS 渐变方案 | 芒果

版权所有,转载请注明出处。
转载自 <a href="http://mangguo.org/cross-browser-css-gradient/" title="跨浏览器的 CSS 渐变方案" rel="bookmark">跨浏览器的 CSS 渐变方案 | 芒果小站</a>
如果喜欢这篇文章,欢迎订阅芒果小站以获得最新内容。

已经有 3 条群众意见

  1. JashionXu /2010-05-06 12:51

    不错不错! 回应

    #1
  2. ?
    跨瀏覽器的CSS漸變 | 超越工作室 /2012-04-15 12:19

    […] 中文出處:http://mangguo.org/cross-browser-css-gradient […] 回应

    #2
  3. ?
    简单漂亮的搜索框 CSS设计 @ 马文娟,网页设计,wordpress,CSS&HTML,photoshop /2012-07-27 22:39

    […] box-shadow 创建内部阴影效果吗?芒果带你仔细阅读这份使用 CSS3 的 gradient、border-radius 及 box-shadow […] 回应

    #3

下面我简单说几句