CSS3渐变可以让你在两个或多个指定的颜色之间显示平稳的过渡。之前你必须使用图像来实现这些效果,但是通过CSS3渐变,可以减少下载事件和宽带的使用。此外,渐变效果的元素在放大时看起来效果更好,因为渐变是由浏览器生成的。
一、线性渐变
指定水平和垂直的启示位置类制作一个对角渐变
- 属性:background/bacjkground-images
- 属性值:linear-gradient(参数)
- 关于参数的使用方法:参数有很多个
- 表示参数值,控制渐变是从哪个方向开始变化的
- 表示颜色
- 表示颜色
- ……
- 注意点
- 线性渐变第一个方向参数是可以省略的,默认的方向是从上到下的
- 多个参数之间需要使用逗号隔开
二、径向渐变
带有指定的角度的线性渐变
-
属性:background
-
属性值:radial-gradient
(起点位置,渐变的形状,渐变的大小,颜色,颜色,……)
-
注意点:
-
径向渐变只有一种兼容写法
-
多个参数用逗号隔开
渐变的形状和大小同时存在的时候,不能用逗号,要用空格
-
三、重复渐变
重复线性渐变和重复径向渐变