看了大漠 写的关于 Gradient 的文章,我也想写点以便加深记忆。

首先gradient 分为linear-gradient (线性渐变) 和 radial-gradient(径向渐变),渐变是作为一个属性值来应用,比如用于background 背景、list-style-image 的属性值。

linear-gradient 线性渐变

语法:linear-gradient( [<point> || <angle>,] <stop>, <stop> [, <stop>]* )

其共有三个参数,第一个参数表示线性渐变的方向,top是从上到下、left是从左到右,如果定义成left top,那就是从左上角到右下角。第二个和第三个参数分别是起点颜色和终点颜色。你还可以在它们之间插入更多的参数,表示多种颜色的渐变。

如:background:-webkit-linear-gradient(top,#000,#fff);

radial-gradient(径向渐变)

语法:-moz-radial-gradient([<bg-position> || <angle>,]? [<shape> || <size>,]? <color-stop>, <color-stop>[, <color-stop>]*);

更具体的请看大漠的吧,一直很喜欢他的文章,因为写的很详细,每个知识点都很透彻!原文:http://www.w3cplus.com/content/css3-gradient

gradient 渐变的更多相关文章

  1. CSS3 Gradient 渐变

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

  2. CSS 3 属性学习 —— 1. Gradient 渐变

    CSS3 中渐变分为: 线性渐变(linear-gradient)和径向渐变(radial-gradient)两种. 1. 线性渐变 参数:  <linear-gradient> = li ...

  3. gradient渐变IE兼容处理

    根据caniuse(http://caniuse.com/#search=gradient),rgba兼容性为IE10以及以上浏览器. 实例代码: <!doctype html> < ...

  4. CSS gradient渐变之webkit核心浏览器下的使用以及实例

    一.关于渐变 渐变是一种应用于平面的视觉效果,可以从一种颜色逐渐地转变成另外一种颜色,故可以创建类似于彩虹的效果渐变可以应用在任何可以使用图片的地方.例如,您可以指定一个这么一个渐变:顶部的颜色是红色 ...

  5. CSS gradient渐变之webkit核心浏览器下的使用

    一.关于渐变 渐变是一种应用于平面的视觉效果,可以从一种颜色逐渐地转变成另外一种颜色,故可以创建类似于彩虹的效果渐变可以应用在任何可以使用图片的地方.例如,您可以指定一个这么一个渐变:顶部的颜色是红色 ...

  6. CSS3 Gradient 渐变还能这么玩

    浏览器支持两种类型的渐变:线性渐变 (linear-gradient),径向渐变 (radial-gradient) 渐变在 CSS 中属于一种 Image 类型,可以结合 background-im ...

  7. iOS 2D绘图详解(Quartz 2D)之阴影和渐变(Shadow,Gradient)

    前言:这个系列写道这里已经是第五篇了,本文会介绍下阴影和渐变的基础知识,以及一些基本的Demo Code展示,应该还会有两篇,介绍下Bitmap绘制以及Pattern等知识. Shadow shado ...

  8. 【转】CSS实现兼容性的渐变背景(gradient)效果

    一.有点俗态的开场白 要是两年前,实现“兼容性的渐变效果”这个说法估计不会被提出来的,那个时候,说起渐变背景,想到的多半是IE的渐变滤镜,其他浏览器尚未支持,但是,在对CSS3支持日趋完善的今天,实现 ...

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

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

随机推荐

  1. C#实现简单的 Ping 的功能,用于测试网络是否已经联通

    /// <summary> /// 是否能 Ping 通指定的主机 /// </summary> /// <param name="ip">ip ...

  2. 多线程分页处理批量数据--jdbc方式

    /** * 同步数据信息到ES * @return */ public boolean syncNhReportSeessToEs(){ long begin = System.currentTime ...

  3. charles 验证工具

    本文参考:charles 验证工具 验证工具/validate 验证工具 Charles可以通过发送到W3C HTML验证器,W3C CSS验证器和W3C Feed验证器来验证记录的响应. 验证报告在 ...

  4. redis 启动配置文件加载报错 service redis does not support chkconfig

    # chkconfig: # description:Redis is a persistent key-value database 网上资料 上面的注释的意思是,redis服务必须在运行级2,3, ...

  5. 解决Maven依赖本地仓库eclipse报错的问题

    一.应用场景 有时候项目报红色的感叹号错误也是由于项目中没有导入相关jar报导致报错 为了使用maven强大的包依赖管理和项目管理功能,故在项目中使用maven2作为项目建构工具. 但是我的项目在内网 ...

  6. 日常工作问题解决:du命令详解

    目录 1.导读 1.1 命令格式 1.2 命令功能 1.3 命令参数 2.实例 2.1 实例1:显示目录或者文件所占空间 2.2 实例2:显示指定文件所占空间 2.3 实例3:查看指定目录所占空间 2 ...

  7. 记crt 在windows与linux服务器之间利用ftp进行文件的上传下载

    我们首先来熟悉一些相关的命令以及操作: ls      #展示linux服务器当前工作目录[你连接sftp时所处的目录]下的所有文件以及文件夹 lcd  F:\niki      #绑定你在windo ...

  8. 记一次Spring Cloud压力测试

    前言 公司打算举办一场活动,现场参与活动人数比较多.针对于可能访问比较密集的接口进行压力测试.使用jmeter进行测试,请求并发稍微多些,系统就会挂起. 针对压力测试出现的问题,因为并发超过1秒钟10 ...

  9. hadoop在eclipse当中如何添加源码?

    [学习笔记] /*org.apache.hadoop.mapreduce.Mapper.Context,java.lang.InterruptedException,想看map的源代码,按contro ...

  10. 『Python基础练习题』day01

    个人主页: https://lipeiguan.top 1.简述变量命名规范 2.name = input(">>>") name变量是什么数据类型? 3.if条 ...