首先介绍一个炒鸡好用的工具;
渐变配色在线调试生成工具:Grabient
通过在线调整渐变的颜色、角度及占比,然后可以直接复制出 CSS 代码
CSS 定义了两种渐变类型:
- 线性渐变(向下 / 向上 / 向左 / 向右 / 对角线)
- 径向渐变(由其中心定义)
CSS 线性渐变
如需创建线性渐变,必须定义至少两个色标。还可以设置起点和方向(或角度)以及渐变效果。
语法
background-image: linear-gradient(direction, color1, color2, ...);
从上到下(默认)
background-image: linear-gradient(red, yellow);
从左到右
background-image: linear-gradient(to right, red , yellow);
对角线
background-image: linear-gradient(to bottom right, red, yellow);
使用角度
可以定义一个角度,来取代预定义的方向(向上、向下、向右、向左、向右下等等)。
值 0deg 等于向上(to top),值 90deg 等于向右(to right),值 180deg 等于向下(to bottom)
语法
background-image: linear-gradient(angle, color1, color2);
这个角度指定水平线和渐变线之间的角度。
实例
background-image: linear-gradient(180deg, red, yellow);
使用多个色标
实例
从上到下(默认)
background-image: linear-gradient(red, yellow, green);
从左到右
background-image: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet);
使用透明度
如需添加透明度,使用 rgba() 函数来定义色标。rgba() 函数中的最后一个参数可以是 0 到 1 的值,用于定义颜色透明度:0 表示全透明,1 表示全彩色(无透明)。
实例
background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
重复线性渐变
repeating-linear-gradient() 函数用于重复线性渐变;
实例
background-image: repeating-linear-gradient(red, yellow 10%, green 20%);
其中 10% 和 20% 是代表颜色占比
CSS 径向渐变
径向渐变由其中心定义。如需创建径向渐变,必须定义至少两个色标。
语法
background-image: radial-gradient(shape size at position, start-color, ..., last-color);
默认 shape 为椭圆形,size 为最远角,position 为中心
均匀间隔的色标(默认)
background-image: radial-gradient(red, yellow, green);
不同间距的色标
background-image: radial-gradient(red 5%, yellow 15%, green 60%);
设置形状
shape 参数定义形状。它可接受 circle 或 elipse 值。默认值为 elipse (椭圆)。
实例
background-image: radial-gradient(circle, red, yellow, green);
使用大小不同的关键字
size 参数定义渐变的大小。它可接受四个值:
- closest-side
- farthest-side
- closest-corner
- farthest-corner(默认)
实例
background-image: radial-gradient(closest-side at 60% 55%, red, yellow, black);
background-image: radial-gradient(farthest-side at 60% 55%, red, yellow, black);
background-image: radial-gradient(closest-corner at 60% 55%, red, yellow, black);
background-image: radial-gradient(farthest-corner at 60% 55%, red, yellow, black);
重复径向渐变
repeating-radial-gradient() 函数用于重复径向渐变
实例
background-image: repeating-radial-gradient(red, yellow 10%, green 15%);