渐变属性有： 1.线性渐变“linear-gradient()”，语法为“linear-gradient(angle, color, color)”； 2.径向渐变“radial-gradient()”，语法为“radial-gradient(位置，颜色，颜色)”。
本教程的运行环境：windows7系统，CSS3&&HTML5版本线性渐变css3，戴尔G3笔记本。
渐变可以让元素的背景更加灵动灵活。 虽然我们可以使用背景图片来显示渐变效果，但是它们不够灵活。 当你想改变颜色时线性渐变css3，需要使用图片编辑器重新编辑，渐变可以在代码中。 直接改颜色就可以了。 CSS3提供了两种渐变方式，分别是线性渐变（linear-gradient）和径向渐变（radial-0gradien）。
1. 线性渐变
线性渐变是沿着一定方向的颜色渐变，可以使用左、右、上、下和对角线。
线性渐变句型：
background: linear-gradient(direction, color1, color2 [stop], color3...);
登录复制
1. direaction：表示线性渐变的方向。 有以下三种表示方法。
(1) 梯度方向
也可以是左上、左下、右上、右下四个对角方向。
(2) 方向起点
也可以是左上、左下、右上、右下四个对角方向。
(3)角度(角度)
角度用数字+单位表示，单位为deg。 所有颜色都是从中心开始，0deg是向上的方向，顺时针为正，逆时针为负。
相应地，有45deg、135deg、225deg、315deg来表示对角线方向，但用角度来表示方向比给定的水平和垂直方向更加灵活，并且可以根据需要调整角度来实现期望的效果。
2. color- * ：表示渐变中的过渡颜色。 一般第一个代表渐变开始色，最后一个代表渐变结束色，中间代表中间过渡色。
3. stop：可以在color前面添加stop，stop可以是百分比值，也可以是像素值，表示某种颜色固定在停止位置，如下：
background: linear-gradient(to right, blue, green 20%, yellow 50%, purple 80%, red); //渐变起始颜色是蓝色，当过度到20%时为绿色，也就是说在20%处恰好是绿色，然后继续渐变过度到黄色，到50%处恰好是黄色，后面同个道理，直到结束颜色红色，正好处于100%处。
登录复制
二、重复线性渐变（repeating-linear-gradient）
说到线性渐变，就不得不提到重复线性渐变。 有时我们想要生成如下所示的白色效果。 对我们来说最方便的方法是重复线性渐变。
语法代码：
background: repeating-linear-gradient(#f00 0,#f00 10%,#ff0 10%,#ff0 20%);
登录复制
上面的绿色从0开始逐渐变化，到了10%的时候还是绿色的，所以生成了一条白色的横条，10%之后就变成了红色，一直到20%还是白色的，所以生成了一条白色的横条这次渲染的时候就会渲染出20%的红黄卡其色的重复渐变，使其呈现出红黄卡其色的疗效。
我们还可以添加方向
background: repeating-linear-gradient(45deg,#f00 0,#f00 10%,#ff0 10%,#ff0 20%);
登录复制
三、径向渐变（radial-gradient）
径向渐变是指从中心点沿周围形成渐变效果。 它由中心点、边缘形状轮廓和位置以及颜色停止点定义。
当我们为一个渐变设置多种颜色时，它们会平分渐变的100%区域。 当然不仅仅是比例，我们还可以使用特定的像素来设置这个大小。 像素设置的大小是指从渐变圆的中心向外延伸的距离。
放射状渐变句型：
= radial-gradient([ [ || ] [ at ]? , | at , ]?[stop]?[ ,[stop]?]+)
登录复制
各个属性的含义如下：
// 圆心位置
= [ | | left | center | right ]? [ |
| top | center | bottom ]? //默认处于中心点
// 渐变形状
= circle | ellipse //默认是ellipse
// 渐变大小
= | [ || ]
= closest-side | closest-corner | farthest-side | farthest-corner
=
= [ | ]{2}
= |
// 渐变颜色及颜色位置
[stop]? = [ | ]?
登录复制
以上需要详细解释一下
我们在定义渐变的时候可以直接定义渐变的形状，但不仅仅是这些方法，还可以通过传入具体的size值来确定渐变的形状。 具体说明如下：
1、当传入一个尺寸参数size或者两个数值相同的尺寸时，表示渐变形状为圆形。
background: radial-gradient(60px,#f00 0,#ff0 100%);
登录复制
2、当传入两个大小不同的尺寸参数时，表示渐变形状为椭圆。
background: radial-gradient(100px 60px,#f00 0,#ff0 100%);
登录复制
四、重复径向渐变（repeating-radial-gradient）
上面讨论线性渐变时，提到线性渐变有重复的线性渐变，径向渐变也有重复的径向渐变。 我们先看一个简单的例子。
background: repeating-radial-gradient(circle at center,#f00 0,#f00 10%, #ff0 10%,#ff0 20%);
登录复制
重复的径向渐变一般与重复的线性渐变类似，只不过重复的线性渐变是在一个方向上的重复渐变，无论是水平、垂直还是对角线，如下图所示，左侧为 0%，右侧为 100%。
但重复径向以圆心为中心点，逐渐呈放射状变化，以中心点为0%，圆边界为100%。
重复的径向渐变是如何产生白白的我就不多说了。 其原理与重复线性渐变相同。
下面是重复径向渐变的实际例子，利用重复径向渐变来生成专辑的效果。
HTML：
登录复制
CSS：
.record-container {
display: inline-block;
overflow: hidden;
width: 400px;
height: 300px;
border-radius: 10px;
box-shadow: 0 6px #99907e;
background: #b5ac9a;
}
.record {
position: relative;
margin: 19px auto;
width: 262px;
height: 262px;
border-radius: 50%;
background: linear-gradient(30deg, transparent 40%, rgba(42, 41, 40, .85) 40%)
no-repeat 100% 0, linear-gradient(60deg, rgba(42, 41, 40, .85) 60%, transparent 60%)
no-repeat 0 100%, repeating-radial-gradient(#2a2928, #2a2928 4px, #ada9a0 5px,
#2a2928 6px);
background-size: 50% 100%, 100% 50%, 100% 100%;
}
.record:after {
position: absolute;
top: 50%;
left: 50%;
margin: -35px;
border: solid 1px #d9a388;
width: 68px;
height: 68px;
border-radius: 50%;
box-shadow: 0 0 0 4px #da5b33, inset 0 0 0 27px #da5b33;
background: #b5ac9a;
content: '';
}
登录复制
推荐学习：css视频教程
发表评论