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%);}#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(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>
