CSS3线性渐变教程


为了显示一个渐变而专门制作一个图片的做法是不灵活的,而且很快会成为一种不好的做法。但是遗憾的是,截至写这篇文章,可能还必须这样做,但是希望 不会持续太久。多亏Firefox 和...

为了显示一个渐变而专门制作一个图片的做法是不灵活的,而且很快会成为一种不好的做法。但是遗憾的是,截至写这篇文章,可能还必须这样做,但是希望 不会持续太久。多亏Firefox 和Safari/Chrome,我们现在可以使用最少的努力实现强大的渐变。在本文中,我们将展示CSS渐变的简单实现以及该属性在Mozilla和 webkit内核浏览器中的不同。

PS:本文原文本来提供了一个视频,但是由于众所周知的原因,我们无法观看这个在Youtube上的视频,想看的同学请自己想办法观看(最高720P) : http://www.youtube.com/watch?v=9D2hyM5SSCE

Webkit

尽管Mozilla和Webkit通常对CSS3属性采取同样的语法,但是对于渐变,他们很不幸的不能达成一致。Webkit是第一个支持渐变的浏览器内核,它使用下面的结构:

1
2
3
4
标签: cssmozillawebkit

更多 css 相关资讯

CSS3 transition实现超酷图片墙动画效果

CSS3 transition实现超酷图片墙动画效果

一、前面的感慨 以前也陆陆续续试过CSS3的一些特性,文字投影,多边框等。但都是试试而已,知道有这么回事。今天,见到了一个新玩意,transition,认认真真 的试了一下,经过,我懵了,我呆

CSS3 animate实现图片墙3D翻转效果

CSS3 animate实现图片墙3D翻转效果

一、前面的唠叨(注意浏览器支持哦) 老实讲,起初研究CSS3的一些东西真是很兴奋的,哇塞,这效果,太酷了,酷得就像超人的三角裤。但是最近,淡了。为什么呢?不是因为百度今天被黑了,也 不

利用CSS3 Gradients创建无图片水晶按钮

没有css3之前,我们需要在PS中创建水晶按钮。有了css3,我们可以很容易生成水晶按 钮。尽管CSS3 Gradient还未得到大多数浏览器的支持,但各主流浏览器已经在自己的内核中支持css3

网站设计中使用CSS的注意事项

大多数技术都有自己约定俗成的标准。CSS也不例外。虽然并非网络上存在的所有CSS都很规范,但按照现有标准来使用CSS却还是不无裨益的。一般来说,开发人员应尽可能将内容与报告

CSS3动画效果入门

CSS3动画效果入门

尽管人们期望在屏幕上有些改变,但是CSS和HTML对页面中的交互能做的实在太少了,而那些还需要用代码来实现。 比如一个链接要么是这个颜色,要么是那个颜色;一个文本区域要么这么

CSS3中的全新色彩表现方式

CSS3中的全新色彩表现方式

传统来说,大家在CSS中使用的颜色要么是16进制格式(如#990000),要么是rgb格式(如rgb(171,205,239))。CSS3带来了一些全新色彩表现和处理方法, 比如使用HSL(Hue, Saturation, Light)

CSS3的10个精彩案例

CSS3的10个精彩案例

四期的 WEB标准化交流会,将会留出一些时间探讨《CSS3应用的时机》。我们的官方网站也用到了一些例如“标题描边”、“按钮圆角”的小东西。 今天看到 Joshua Johnson 的一篇

CSS3的10个精彩案例

CSS3的10个精彩案例

四期的 WEB标准化交流会,将会留出一些时间探讨《CSS3应用的时机》。我们的官方网站也用到了一些例如“标题描边”、“按钮圆角”的小东西。 今天看到 Joshua Johnson 的一篇

玩转CSS3色彩

玩转CSS3色彩

传统来说,大家在CSS中使用的颜色要么是16进制格式,要么是rgb格式,就像rgb(171,205,239)。 CSS3带来了一些新的处理颜色的方法,比如使用HSL(Hue, Saturation, Light) 和op

征服高级CSS选择器

征服高级CSS选择器

CSS是对网页设计师可用的最强大的工具之一。使用它我们可以在几分钟内改变一个网站的界面,而不用改变页面的标签。但是尽管事实上,我们每个人也 都意识到了它是有用的,CSS 选

更多 mozilla 相关资讯

CSS3教程:background-clip和background-origin

CSS3教程:background-clip和background-origin

background-clip 和 background-origin 是 CSS3 中新加的 background module 属性,用来确定背景的定位。 background-clip 用来判断 background 是否包含 border 区域。而 ba

更多 webkit 相关资讯

CSS3 transition实现超酷图片墙动画效果

CSS3 transition实现超酷图片墙动画效果

一、前面的感慨 以前也陆陆续续试过CSS3的一些特性,文字投影,多边框等。但都是试试而已,知道有这么回事。今天,见到了一个新玩意,transition,认认真真 的试了一下,经过,我懵了,我呆

CSS3 animate实现图片墙3D翻转效果

CSS3 animate实现图片墙3D翻转效果

一、前面的唠叨(注意浏览器支持哦) 老实讲,起初研究CSS3的一些东西真是很兴奋的,哇塞,这效果,太酷了,酷得就像超人的三角裤。但是最近,淡了。为什么呢?不是因为百度今天被黑了,也 不

CSS3动画效果入门

CSS3动画效果入门

尽管人们期望在屏幕上有些改变,但是CSS和HTML对页面中的交互能做的实在太少了,而那些还需要用代码来实现。 比如一个链接要么是这个颜色,要么是那个颜色;一个文本区域要么这么

CSS3 HTML5实例一(圆角)

CSS3 HTML5实例一(圆角)

CSS 3 HTML 5 是未来的 Web,它们都还没有正式到来,虽然不少浏览器已经开始对它们提供部分支持。本文介绍了 5 个 CSS3 技巧,可以帮你实现未来的Web。目前这些技术不应该用在