2020-03-05

css3 渐变
概念：CSS3 渐变（gradient）可以让你在两个或多个指定的颜色之间显示平稳的过渡。 以前，你必须使用图像来实现这些效果，现在通过使用 CSS3 的渐变（gradients）即可实现。此外，渐变效果的元素在放大时看起来效果更好，因为渐变（gradient）是由浏览器生成的。
线性渐变：
语法：
background-image: linear-gradient(direction, color-stop1, color-stop2, …);
说明：
direction：默认为to bottom，即从上向下的渐变；
还可以设置为度数。自上向右 （0度 —— 90度的变化） – 旧的标准是相反 自右而上 （ 90—— 0）
stop：颜色的分布位置，默认均匀分布，例如有3个颜色，各个颜色的stop均为33.33%。
径向渐变：
语法：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：最远角。