css3渐变(gradient)

css3渐变（gradient）
css3的内容各种格式五花八门都需要各种代码的进行组构，这次我就带大家重新巩固下css3的渐变，一起学习，一起进步。
概念：CSS3 渐变（gradient）可以让你在两个或多个指定的颜色之间显示平稳的过渡。 以前，你必须使用图像来实现这些效果，现在通过使用 CSS3 的渐变（gradients）即可实现。此外，渐变效果的元素在放大时看起来效果更好，因为渐变（gradient）是由浏览器生成的。可以使得渐变效果完美显示。
css3渐变也分为两种，接下来咱们一起去了解进行认知:
1、线性渐变;
线性渐变语法:background-image:linear-gradient(direction, color-stop1, color-stop2, …);
线性渐变说明：direction(表示渐变效果是从什么位置开始的渐变)
1）、to bottom(默认效果；即自上到下的渐变)如图示:
background-image: linear-gradient(to bottom,red,blue);

2）、to bottom right(默认效果；即自左上角到右下角的渐变)如图示:
background-image: linear-gradient(to bottom right,red,blue);

从左到右、从右到左、从下到上等等的各种渐变都是依从上面所述的规律显示。
2、径向渐变;
径向渐变语法：background-image: radial-gradient(shape size at position, start-color, …, last-color);
说明：position：渐变起点的位置，可以为百分比，默认是图形的正中心。
shape：渐变的形状，ellipse表示椭圆形，circle表示圆形。默认为ellipse，如果元素形状为正方形的元素，则ellipse和circle显示一样。
size：渐变的大小，即渐变到哪里停止，它有四个值。 closest-side：最近边； farthest-side：最远边； closest-corner：最近角； farthest-corner：最远角。
示例：background-image:-webkit-radial-gradient(40%50%, closest-corner,red,blue);}
40%50%表示径向渐变的中心点，40%定位其水平位置，50%定位其垂直位置；
closest-corner表示渐变大小；
red代表渐变开始颜色，blue代表渐变结束颜色；
示图：

上面就是小亮在逆战班中学到的一些关于css3渐变的知识了
学海无涯，各位加油