看了大漠 写的关于 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. Java 处理json字符串value中多余的双引号

    转: Java 处理json字符串value中多余的双引号 一.错误场景 json字符串的value值中有多余的双引号 1.直接上错误的json字符串 1 String errorJsonStr =  ...

  2. Maven打包SpringBoot

    Pom文件提交plugin <build> <finalName>Site</finalName><!--文件名可自定义--> <plugins& ...

  3. 配置Apache运行在event事件驱动模式下

    (1)启用MPM Include conf/extra/httpd-mpm.conf (2)配置evnet MPM参数  <IfModule event.c> #default 3 Ser ...

  4. Permission denied: user=dr.who, access=READ_EXECUTE, inode="/tmp":student:supergroup:drwx------权限问题

    在查看browse directory时,点击tmp,无法进入,报错:“Permission denied: user=dr.who, access=READ_EXECUTE, inode=" ...

  5. Core Data 的线程安全问题

    前言: 很多小的App只需要一个ManagedContext在主线程就可以了,但是有时候对于CoreData的操作要耗时很久的,比如App开启的时候要载入大量数据,如果都放在主线程,毫无疑问会阻塞UI ...

  6. 树莓派连接显示器后设置ssh服务开机自动开启

    进入命令行,然后执行: cd /boot sudo touch ssh sudo restart -r now 然后就重新启动了,重启好了会有依据提示. 然后可以输入ssh localhost进行一下 ...

  7. Docker 容器资源隔离 namespace(十)

    目录 一.简介 Linux Namespace的6大类型 二.Mount Namespace 三.IPC Namespace 四.Network Namespace 五.UTS Namespace 六 ...

  8. 使用expect实现自动交互,shell命令行自动输入,脚本自动化,变量引用,expect spawn执行带引号命令,expect 变量为空,不生效,不能匹配通配符*,函数,数组

    背景 有需求,在允许命令或者脚本跳出交互行,需要进行内容输入,但需要人手动输入,不是很方便,此时可以通过expect来实现自动互动交互. expect是一个自动交互功能的工具,可以满足代替我们实际工作 ...

  9. docker中使用Mysql8+phpmyadmin

    现在基本装这套都用docker了,有一些小坑在里面,简单说一下. 运行mysql比较简单,参考mysql⭐Docker Official Images,需要注意不要忘记暴露端口给phpmyadmin用 ...

  10. FineReport做成之后如何在Tomcat上运行

    问题描述: 自己用FineReport做成的报表画面,要在Tomcat上运行启动 第一步:下载Tomcat 网址: http://tomcat.apache.org/download-80.cgi 下 ...