一、渐变方向
线性渐变可以设置水平、垂直和对角方向。可以通过设置background-image属性实现。
background-image: linear-gradient(to right, #ff618b, #fcabdc);
background-image: linear-gradient(to bottom, #ff618b, #fcabdc);
background-image: linear-gradient(to bottom right, #ff618b, #fcabdc);
上面的代码实现了从左到右、从上到下、从左上角到右下角的线性渐变背景效果。
二、渐变色
线性渐变可以使用2种及以上的颜色实现。可以通过设置background-image属性实现。
background-image: linear-gradient(to right, #ff618b 0%, #fcabdc 100%);
background-image: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
上面的代码实现了颜色间的过渡。
三、背景图案与渐变
可以将渐变与背景图像结合使用，实现更加复杂的背景效果。
background-image: url('bg-image.png'), linear-gradient(to right, #ff618b 0%, #fcabdc 100%);
上面的代码实现了在图像上方的线性渐变背景效果。图像的扩展样式可以通过background-size、background-repeat属性实现。
四、渐变角度
渐变背景可以根据角度实现线性渐变背景，而不是按照方向。
background-image: linear-gradient(45deg, red, blue);
background-image: linear-gradient(90deg, red, blue);
background-image: linear-gradient(135deg, red, blue);
上面的代码展示了3种角度分别在对角线上、垂直和水平上实现的渐变效果。
五、渐变颜色定义方式
除了使用具体颜色名称外，也可以通过RGB或RGBA函数定义颜色。
background-image: linear-gradient(to right, rgba(255, 97, 139, 1), rgba(252, 171, 220, 1));
background-image: linear-gradient(to right, rgb(255, 97, 139), rgb(252, 171, 220));
上面的代码定义了以RGB方式的线性渐变颜色。
六、透明度与渐变
可以使用RGBA颜色定义方式来设置渐变的颜色透明度。
background-image: linear-gradient(to right, rgba(255, 97, 139, 1), rgba(252, 171, 220, 0));
上面的代码定义了以RGBA方式的线性渐变颜色，从完全不透明到完全透明。
七、公共下标
可以使用关键字“from”、“to”、“left”、“right”、“top”、“bottom”在不同方向之间进行简单转换并实现线性渐变背景。
background-image: linear-gradient(bottom right, #28c7fa 0%, #00a5e4 100%);
background-image: linear-gradient(to right, #28c7fa 0%, #00a5e4 100%);
background-image: linear-gradient(0deg, #28c7fa 0%, #00a5e4 50%, #28c7fa 100%);
background-image: linear-gradient(45deg, #28c7fa 0%, #00a5e4 50%, #28c7fa 100%);
上面代码针对公共下标的实例进行了具体展示。
