理解CSS3线性渐变
作者：vocal 来源：前端观察 发布时间：2010-03-28 13:42:00
标签：CSS3,渐变,线性,浏览器
为了显示一个渐变而专门制作一个图片的做法是不灵活的，而且很快会成为一种不好的做法。但是遗憾的是，截至写这篇文章，可能还必须这样做，但是希望不会持续太久。多亏Firefox 和Safari/Chrome，我们现在可以使用最少的努力实现强大的渐变。在本文中，我们将展示CSS渐变的简单实现以及该属性在Mozilla和webkit内核浏览器中的不同。
PS：本文原文本来提供了一个视频，但是由于众所周知的原因，我们无法观看这个在Youtube上的视频，想看的同学请自己想办法观看(最高720P) : http://www.youtube.com/watch?v=9D2hyM5SSCE
Webkit
尽管Mozilla和Webkit通常对CSS3属性采取同样的语法，但是对于渐变，他们很不幸的不能达成一致。Webkit是第一个支持渐变的浏览器内核，它使用下面的结构：
/* Syntax, taken from: http://webkit.org/blog/175/introducing-css-gradients/ */
-webkit-gradient(<type>, <point> [, <radius>]?, <point> [, <radius>]? [, <stop>]*)
/* In practice... */
background: -webkit-gradient(linear, 0 0, 0 100％, from(red), to(blue));
不要担心这些语法会让你看花眼，我也是这样的！只要记得我们需要用一个逗号来隔开这个参数组。
渐变的类型? (linear)
渐变开始的X Y 轴坐标(0 0 – 或者left-top)
渐变结束的X Y 轴坐标(0 100％ 或者left-bottom)
开始的颜色? (from(red))
结束的颜色? (to(blue))
0
投稿猜你喜欢
- # 写在前面，这篇文章的原创作者是Charles我只是在他这个程序的基础上边进行加工，另外有一些自己的改造# 并都附上了注释和我自己的理解，
- 用在产品内容展示的页面上，给产品图片加上提示工具条，鼠标移动图片上即可看到效果，效果还是不错的：带黑白效果和放大图片效果(by misshj
- 本文实例讲述了mysql实现合并同一ID对应多条数据的方法。分享给大家供大家参考，具体如下：如 ：CREATE TABLE `c_class
WingIDE的使用好的工具可以让你做事时，事半功倍！这一点在写代码的过程中尤为明显，使用Pyhton写程序有一年多了！各类编辑器IDE也使- 细线边框是网页中定位区分内容常用的一种方法，配合特定图片的使用，往往能够达到不错的效果，那么如何制作细线边框呢？asp之家注：现在要实现这个
- 前言：自增列可使用 auto_increment 来实现，当一个列被标识为 auto_increment 之后，在添加时如果不给此列设置任何
- index_selectanchor_w = self.FloatTensor(self.scaled_anchors).index_sel
- 案例package mainimport ( _ "github.com/go-sql-driver/mysql&q
- 背景目前手上有一个小程序的项目，希望转发时分享消息的界面能够自定义,然而微信小程序只提供设置图片的url和title。 /**
- 类是面向对象程序设计的一部分。面向对象程序设计或者简称为 OOP 致力于创建可重用代码块称之为类。当你想在你的程序中使用类时，你会从类中创建
- 特点：不需要另外加个清除DIV:after（伪对象）--设置在对象后发生的内容，通常和content配合使用，IE不支持此伪对象，非Ie 浏
- 前言只有你想不到，没有我找不到写不了的好游戏！哈喽。我是你们的栗子同学啦~今天小编去了我朋友家里玩儿，看到了一个敲可爱的小狗狗，是我朋友养的
- 1. 下载2. 解压缩3. 添加path环境变量，路径指向mysql所在bin目录下4. 在主目录下创建data文件夹5. 注册window
- 问题setInterval 是间隔调用，与之类似的还有 setTimeout。这两个 API 通常用来做 ajax 短连接轮询数据。比如有一
- 一个协程里可以启动另外一个协程，并等待它完成返回结果，采用await关键字，例子如下：import asyncioasync def out
- 导语大家早上好哈！——有没有想我啊？木木子来啦，今日上线放一波大招给大家！刚学会了录制视频，之后的效果动态显示终于完美录制出来了！今天跟着小
- 本文实例讲述了python常见数制转换用法。分享给大家供大家参考。具体分析如下：1.进位制度Python中二进制是以0b开头的:例如: 0b
- python 打印对象的所有属性值：def prn_obj(obj): print '\n'.join([
- 前言Python 是每个程序员都喜欢的语言，因为它易于编码和易于阅读的语法。但是，你知道 python 有一些很酷的技巧可以用来让事情变得更
- 最流行的数据交换格式之一是 CSV 格式。是需要通过键盘和控制台以外的方式将信息输入和输出的程序，通过文本文件交换信息是在程序之间共享信息的
