看了大漠 写的关于 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. Ionic4.x 新增底部 tabs 页面

    1.创建 tab4 模块 ionic g page tab4 2.修改根目录里 app-routing.module.ts 文件里面的路由配置,去掉默认增加的路由 3.tabs.router.modu ...

  2. 深度学习框架PyTorch一书的学习-第七章-生成对抗网络(GAN)

    参考:https://github.com/chenyuntc/pytorch-book/tree/v1.0/chapter7-GAN生成动漫头像 GAN解决了非监督学习中的著名问题:给定一批样本,训 ...

  3. OVS+VXLAN实现两个宿主机上的VM间的通信

    一.组网图 说明: 1.使用网络命名空间表示vm1和vm2. 因为我没有两台物理服务器. 2.使用virtualbox 的两条虚机模拟作为host1和host2. 二.配置指导 1.创建网桥 br0 ...

  4. toast提示信息获取和Monkey笔记

    获取toast toast提示信息出现场景:用户输入用户名和密码后,提示的'登录成功', 用之前的定位方法获取不了,需要Uiautomator2来获取 安装node.js (使用 npm 或 node ...

  5. C#读取带命名空间的xml

    首先带有命名空间的xml读取可以使用Xml.Linq,也可以使用xpath,本文将采用xpath的方式解析. 原文参考了:https://www.cnblogs.com/duanjt/p/544054 ...

  6. ElasticSearch——数据建模最佳实践

    如何建模 mapping 设计非常重要,需要从两个维度进行考虑: 功能:搜索.排序.聚合 性能:存储的开锁.内存的开销.搜索的性能 mapping 注意事项: 加入新字段很容易(必要时需要 updat ...

  7. Node.js中使用pipe拷贝大文件不能完全拷贝的解决办法

    原来的代码如下: var readable = fs.createReadStream( filepath ); var writable = fs.createWriteStream( outFil ...

  8. iOS面试考察点

    )自我介绍.项目经历.专业知识.自由提问 (2)准备简历.投发简历.笔试(电话面试.).面试.复试.终面试.试用.转正.发展.跳槽(加薪升职) 1闲聊 a)自我介绍:自我认识能力 b)评价上一家公司: ...

  9. iOS-self.用法

    关于self.用法的一些总结 2010-01-10 21:46 最近有人问我关于什么时候用self.赋值的问题, 我总结了一下, 发出来给大家参考. 有什么问题请大家斧正. 关于什么时间用self. ...

  10. CF1227C Messy

    思路: 构造题.首先把字符串变成“(((((...)))))”的样子,再根据k的取值变成“()()()...((...))”的样子即可. 实现: #include <bits/stdc++.h& ...