CSS3 Gradient分为linear-gradient(线性渐变)和radial-gradient(径向渐变)。而我们今天主要是针对线性渐变来剖析其具体的用法。为了更好的应用CSS3 Gradient,我们需要先了解一下目前的几种现代浏览器的内核,主流内容主要有Mozilla(Gecko)(熟悉的有Firefox,Flock等浏览器)、WebKit(熟悉的有Safari、Chrome等浏览器)、Opera(presto)(Opera浏览器)、Trident(讨厌的IE浏览器)。本文照常忽略IE不管,我们主要看看在Mozilla、Webkit、Opera下的应用,当然在IE下也可以实现,他需要通过IE特有的滤镜来实现,在后面会列出滤镜的使用语法,但不会具体介绍如何实用,感兴趣的可以搜索相关技术文档。那我们了解了这些,现在就开始今天的主题吧。

线性渐变在Webkit下的应用

background: -webkit-gradient(linear,center top,center bottom,from(#ccc), to(#000)); //有5个属性(老式写法)
background: -webkit-linear-gradient(top,#ccc,#000);//(新式写法) 其中可以写多个颜色的渐变

线性渐变在Mozilla下的应用
background: -moz-linear-gradient( top,#ccc,#000);


【CSS3 RGBA】
语法:

R:红色值。正整数 | 百分数

G:绿色值。正整数 | 百分数

B:蓝色值。正整数| 百分数

A:透明度。取值0~1之间 (1表示无透明度,0表示透明度为100%·即完全透明)

取值:

<length> :Hue(色调)。 0(或360)表示红色,120表示绿色,240表示蓝色,当然可取其他数值来确定其它颜色;

<percentage> :Saturation(饱和度)。 取值为0%到100%之间的值;

<percentage> :Lightness(亮度)。 取值为0%到100%之间的值;

<opacity> :alpha(透明度)。 取值在0到1之间;

【CSS3的圆角Border-radius】

 

CSS3 Gradient-CSS3渐变的更多相关文章

  1. CSS3 Gradient线性渐变

    废话小说,看代码 <!DOCTYPE html > <html > <head> <meta charset="utf-8"> &l ...

  2. CSS3 Gradient 渐变

    转载自:http://www.w3cplus.com/content/css3-gradient CSS3发布很久了,现在在国外的一些页面上常能看到他的身影,这让我羡慕已久,只可惜在国内为了兼容IE, ...

  3. 深入理解CSS3 gradient斜向线性渐变——张鑫旭

    by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=3639 一.问题没有想 ...

  4. 【01】CSS3 Gradient 分为 linear-gradient(线性渐变)和 radial-gradient(径 向渐变)(转)

    CSS3 Gradient 分为 linear-gradient(线性渐变)和 radial-gradient(径 向渐变).而我们今天主要是针对线性渐变来剖析其具体的用法.为了更好的应用 CSS3 ...

  5. CSS3 Gradient

    CSS3CSS3发布很久了,现在在国外的一些页面上常能看到他的身影,这让我羡慕已久,只可惜在国内为了兼容IE,让这一项技术受到很大的限制,很多Web前端人员都望而止步.虽然如此但还是有很多朋友在钻研C ...

  6. CSS3的线性渐变(linear-gradient)

    CSS3渐变(gradient)可分为线性渐变(linear-gradient)和径向渐变(radial-gradient).今天给大家说一说线性渐变. 以webkit内核浏览器为例, 语法: div ...

  7. CSS3 Gradient渐变效果

    最近看到一遍关于渐变的文章,感觉很好,只是收藏感觉太可惜了,就转载了,好好学习! CSS3 Gradient分为linear-gradient(线性渐变)和radial-gradient(径向渐变). ...

  8. css3实现颜色渐变以及兼容性处理

    有时我们会看到网站上的一些图片是渐变色的,这些图片有的是ui设计出来的,有的则是直接通过css3制作出来的.下面就讲一下css3实现渐变色的方法,以及在各个浏览器上的兼容性. CSS3 Gradien ...

  9. css3 Gradient背景

    css3的gradient分为两种:线性渐变(linear)和径向渐变(radial). 一.线性渐变linear-gradient 1.介绍 linear-gradient([设置方向],[设置开始 ...

  10. css3背景颜色渐变属性 兼容性测试基础环境为:windows系统;IE6.0+, Firefox4.0+, Chrome4.0+, Safari4.0+, Opera15.0+

    css3背景颜色渐变属性 兼容性测试基础环境为:windows系统:IE6.0+, Firefox4.0+, Chrome4.0+, Safari4.0+, Opera15.0+ 语法: <li ...

随机推荐

  1. 经典 SQL

    经典sql   总结一些经常用到或碰到的SQL语句,希望能与大家分享,同时也希望大家能提供更多的精妙SQL语句..... 1.delete table1 from (select * from tab ...

  2. ajax 实现异步请求

    ajax实现异步请求: function onclicks() { $.ajax( { url:'../hhh/columnSearch.do',// 跳转到 action // data: {tab ...

  3. python基础之 sys.argv[]用法

    sys.argv[]是用来获取命令行参数的,sys.argv[0]表示代码本身文件路径,所以参数从1开始. arg[1]表示第一个命令行参数 arg[1][2:] 表示取第一个命令行参数,但是去掉前两 ...

  4. PHP获取真实的网络IP

    function get_client_ip() { $ip = $_SERVER['REMOTE_ADDR']; if (isset($_SERVER['HTTP_CLIENT_IP']) & ...

  5. 图像 - 创建 头像V1.0

    byte[] logo //处理群头像信息 //byte[] logoByte = Convert.FromBase64String(logo); ////1.0 System.IO.MemorySt ...

  6. Cortex-M3和Cortex-M4 Fault异常应用之二 ----- Fault处理函数的实现

    在项目处于调试期间,Fault处理程序可能只是一个断点指令,调试器遇到这个指令后停止程序的运行.默认情况下,由于非硬Fault被禁能,所有发生的非Fault都会上访成硬Fault,因此只要在硬Faul ...

  7. QT creator+OpenCV2.4.2+MinGW 在windows下开发环境配置

    由于项目开发的原因,需要配置QT creator+OpenCV2.4.2+MinGW开发环境,现对配置方法做如下总结: 1.  下载必备软件 QT SDK for Open Source C++ de ...

  8. 用MFC实现OpenGL编程

    一.OpenGL简介 众所周知,OpenGL原先是Silicon Graphics Incorporated(SGI公司)在他们的图形工作站上开发高质量图像的接口.但最近几年它成为一个非常优秀的开放式 ...

  9. SVG 教程

    SVG 意为可缩放矢量图形(Scalable Vector Graphics). SVG 使用 XML 格式定义图像. 现在开始学习 SVG! <html> <body> &l ...

  10. 【PAT】1012. The Best Rank (25)

    题目链接: http://pat.zju.edu.cn/contests/pat-a-practise/1012 题目描述: To evaluate the performance of our fi ...