css渐变

[LiberoWang]

• linear-gradient(线性渐变):向下/向上/向左/向右/对角方向

• radial-gradient(径向渐变):由它们的中心定义

1. linear-gradient(线性渐变）

语法：
background: linear-gradient( [ <angle> | <direction> ,]? <color-stop> [, <color-stop>]+);（默认是从上到下）

栗子🌰：

突变：
1）.“如果多个色标具有相同的位置，它们会产生一个无限小的过渡区域， 过渡的起止色分别是第一个和最后一个指定值。 从效果上看，颜色会在那 个位置突然变化，而不是一个平滑的渐变过程。”

2）.“如果某个色标的位置值比整个列表中在它之前的色标的位置值都要 小，则该色标的位置值会被设置为它前面所有色标位置值的最大值。”

重复的线性渐变-repeating-linear-gradient()

.divOne {
    background: repeating-linear-gradient(red, yellow 10%, green 20%);
}

.divTwo {
    background: repeating-linear-gradient(to right, rgba(255, 255, 0, 0.3) 10%, rgba(0, 255, 255, 1) 20%);
}

2. radial-gradient(径向渐变）
   
   概要：
   径向渐变(Radial gradients)由其中心点、边缘形状轮廓及位置、色值结束点（color stops）定义而成。 径向渐变的中心点至边缘形状以及其延伸的部分，由连续缩放的若干同心轮廓组成，这个轮廓由设定的边缘形状决定。色值结束点用于设定虚拟渐变射线（virtual gradient ray）的变化方式，由中心点水平变化至右侧（如图）。色值结束点由百分比设定时，则是相对于终点为渐变射线与边缘形状相交点的渐变半径，渐变半径的终点位置即为100%。每个轮廓均为纯色，颜色由渐变射线上相应横切点所定义的颜色决定。
   语法：
   background: radial-gradient([[<shape> || <size>] [at <position>]?,| at <position>,]?<color-stop>[,<color-stop>]+）
<position>：主要用来定义径向渐变的圆心位置。
   <length>：用长度值指定径向渐变圆心的横坐标或纵坐标。可以为负值。
   <percentage>：用百分比指定径向渐变圆心的横坐标或纵坐标。可以为负值。
   left：设置左边为径向渐变圆心的横坐标值。
   center：设置中间为径向渐变圆心的横坐标值或纵坐标。
   right：设置右边为径向渐变圆心的横坐标值。
   top：设置顶部为径向渐变圆心的纵标值。
   bottom：设置底部为径向渐变圆心的纵标值。
   
   <shape>：主要用来定义径向渐变的形状。其主要包括两个值“circle”和“ellipse”：
   circle：如果<size>和<length>大小相等，那么径向渐变是一个圆形，也就是用来指定圆形的径向渐变
   ellipse：如果<size>和<length>大小不相等，那么径向渐变是一个椭圆形，也就是用来指定椭圆形的径向渐变。
   <size>：主要用来确定径向渐变的结束形状大小。如果省略了，其默认值为“farthest-corner”。可以给其显式的设置一些关键词，主要有：
   closest-side：指定径向渐变的半径长度为从圆心到离圆心最近的边；
   closest-corner：指定径向渐变的半径长度为从圆心到离圆心最近的角；
   farthest-side：指定径向渐变的半径长度为从圆心到离圆心最远的边；
   farthest-corner：指定径向渐变的半径长度为从圆心到离圆心最远的角；
   

重复径向渐变-repeating-radial-gradient()

.divOne {
    background: repeating-radial-gradient(red, yellow 10%, green 15%);
}

参考链接：
CSS揭秘
CSS Gradient Patterns
CSS3 Patterns Gallery
SVG Patterns Gallery
介绍
规范