CSS3，渐变效果（线性渐变，径向渐变，重复渐变），实现
各种背景效果。
CSS3中的渐变实现（线性渐变、径向渐变）
CSS3中的background新增属性实现，常见页⾯效果。
CSS3中的图⽚边框的基本⽤法
CSS3中的transition属性，实现过渡效果。
CSS3中的transfrom属性，实现 2d变换效果。
渐变：是css3中⽐较丰富多彩的⼀个特性，通过渐变可以实现许多绚丽的效果，有效的减少图⽚的使⽤数量，并且具有很强的适应性和可拓展性。可分为线性渐变、径向渐变。
1.linear-gradient 线性渐变，指沿着某条直线朝⼀个⽅向产⽣渐变效果。
语法：linear-gradient([<point>||<angle>,]?<stop>,<stop>[,<stop>*])
第⼀个参数表⽰线性渐变的⽅向，
1-to left：设置渐变为从右到左。相当于270deg
2-to right：设置渐变从左到右。相当于90deg。
3-to top：设置渐变从上到下，相当于0deg。
4-to buttom：设置渐变从下到上，相当于180deg。这是默认值，也可以直接指定度数，如45度。
第⼆个参数，是起点颜⾊，可以指定颜⾊的位置。
第三个参数是重点颜⾊，捏还可以在后⾯添加更多的参数，表⽰多种颜⾊渐变。
2.radial-gradient: 径向渐变 指从⼀个中⼼店开始沿着四周产⽣渐变效果。
语法：<radial-gradient> = radial-gradient([<shape>||<size>][at <position>]?,|[at<position>]?<color-stop>[,<color-stop>]+);
1- <position>确定圆⼼的位置，提供2个参数，第⼀个表⽰横坐标，第⼆个表⽰纵坐标；
如果只提供⼀个，第⼆个默认为50%，即center。
2- shape：渐变的形状，ellipse表⽰椭圆，circle表⽰园型。默认ellipse，
如果元素形状是正⽅形的元素，则ellipse和circle显⽰⼀样。
如果宽⾼不⼀样，默认效果切换到ellipse。
3- size：渐变的⼤⼩，即渐变从哪⾥到哪⾥停⽌，它有4个值。
colsest-side：最近边
farthest-side：最远边
closet-corner：最近⾓
farthest-corner：最远⾓，默认值。
4- <color>指定颜⾊额，rgba或hsla
3. 重复渐变
repeating-radial-gradient
repeating-linear-gradient
===============================================
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>渐变效果：线性变化（渐变⾊）</title>
<style type="text/css">
#div01 {
width: 200px;
height: 100px;
/* 添加渐变，渐变不是单⼀⾊，产⽣的是⼀个图像，所以需要background添加。 */
/
* linear-gradient(⽅向，开始颜⾊位置，颜⾊2 位置，颜⾊3 位置...) */
/* background: linear-gradient(to right, red, blue ); */
/* 设置百分⽐，左边⼀个颜⾊，右边⼀个颜⾊ */
background: linear-gradient(to right, red 0%, red 50%, blue 50%, blue 100%);
transition用法搭配}
#div02 {
width: 100px;
height: 100px;
margin-top: 10px;
/* 语法：radial-gradient(形状⼤⼩坐标 );
形状shape：circle产⽣正⽅形的渐变⾊；ellipse适配当前的形状。如果是正⽅形的容器，两者效果⼀样
at position：坐标，默认在正中⼼，可以赋值坐标(相对于左上⾓)，也可以赋值关键字（left/center/right/top/bottom）⼤⼩size：colsest-side：最近边
farthest-side：最远边
closet-corner：最近⾓
farthest-corner：最远⾓，默认值。
*/
/* background: radial-gradient(red, blue); */
/* background: radial-gradient(circle closest-corner at 50px 50px ,red, blue); */
/* background: radial-gradient(at left top, red, blue); */
/* background: radial-gradient(at left top, red, blue); */
background: radial-gradient(red, red 50%, blue 50%, blue 100%);
}
/* 重复渐变1 */
#div03 {
width: 300px;
height: 300px;
margin-top: 10px;
/* background: radial-gradient(#fff 0%, #fff 10%,
#000 10%, #000 20%,
#fff 20%, #fff 30%,
#000 30%, #000 40%,
#fff 40%, #fff 50%,
#000 50%, #000 60%,
#fff 60%, #fff 70%,
#000 70%, #000 80%,
#fff 80%, #fff 90%,
#000 90%, #000 100%); */
background: repeating-radial-gradient(circle closest-side at center center,    #fff 0%, #fff 10%,
#000 10%, #000 20%);
}
/* 重复渐变2 */
#div04 {
width: 200px;
height: 200px;
margin-top: 10px;
background: repeating-linear-gradient(45deg,
#fff 0%, #fff 10%,
#000 10%, #000 20%);
}
</style>
</head>
<body>
<div id="div01"></div>
<div id="div02"></div>
<div id="div03"></div>
<div id="div04"></div>
</body>
</html>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。