软件介绍:CSS渐变可以让你在两个或多个指定颜色之间显示平滑的过渡CSS定义了三种渐变类型:Linear Gradients (goes down/up/left/rig...
CSS渐变可以让你在两个或多个指定颜色之间显示平滑的过渡
CSS定义了三种渐变类型:
Linear Gradients (goes down/up/left/right/diagonally) 下降/ 上升/左/右/对角线
Radial Gradients (defined by their center) 由中心定义
Conic Gradients (rotated around a center point) 绕一个中心点旋转
CSS线性渐变 (Linear Gradients)
要创建线性渐变，您必须定义至少两个颜色停止。颜色停止是您想要渲染之间平滑过渡的颜色。您还可以设置一个起点和方向(或角度)以及梯度效果。
语法:
#grad {
background-image: linear-gradient(to right, red , yellow);
}
#grad {
background-image: linear-gradient(to bottom right, red, yellow);
}
————————————————
渐变色代码
例子：linear-gradient(to top, #0ba360 0%, #0ba360 100%)
1、linear-gradient 线性渐变
CSS3 定义了两种类型的渐变（gradients）：
线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向
径向渐变（Radial Gradients）- 由它们的中心定义
2、默认从上到下，
# to top 从下到上渐变
# to left 从右到左渐变
# to right 从左到右渐变
# to bottom right 从左上角到右下角渐变
3、#0ba360和#0ba360分别代表16进制的颜色数值，分别对应不同的颜色，可以通过下面进行转换
4、 0%和100%表示从0到100这个位置的变换
三种颜色可以使用：颜色数值 0%， 颜色数值 25%， 颜色数值100%
5、代码解释
linear-gradient(to top, #0ba360 0%, #0ba360 100%)
表示，0%的位置使用#0ba360，100%的位置使用#0ba360，从下到上线性渐变。
———————————————— 土嘎嘎整理的CSS渐变色代码大全如下----------------------
从上到下
#grad {
background: -webkit-linear-gradient(red, blue);
background: -o-linear-gradient(red, blue);
background: -moz-linear-gradient(red, blue);
background: linear-gradient(red, blue);
}
从左到右
#grad {
background: -webkit-linear-gradient(left, red , blue);
background: -o-linear-gradient(right, red, blue);
background: -moz-linear-gradient(right, red, blue);
background: linear-gradient(to right, red , blue);
}
从左上到右下
#grad {
background: -webkit-linear-gradient(left top, red , blue);
background: -o-linear-gradient(bottom right, red, blue);
background: -moz-linear-gradient(bottom right, red, blue);
background: linear-gradient(to bottom right, red , blue);
}
使用角度
#grad {
background: -webkit-linear-gradient(180deg, red, blue);
background: -o-linear-gradient(180deg, red, blue);
background: -moz-linear-gradient(180deg, red, blue);
background: linear-gradient(180deg, red, blue);
}
多种颜色节点
#grad {
background: -webkit-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);
background: -o-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);
background: -moz-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);
background: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet);
}
使用透明度
#grad {
background: -webkit-linear-gradient(left,rgba(255,0,0,0),rgba(255,0,0,1));
background: -o-linear-gradient(right,rgba(255,0,0,0),rgba(255,0,0,1));
background: -moz-linear-gradient(right,rgba(255,0,0,0),rgba(255,0,0,1));
background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
}
径向渐变
#grad {
background: -webkit-radial-gradient(red, green, blue);
background: -o-radial-gradient(red, green, blue);
background: -moz-radial-gradient(red, green, blue);
background: radial-gradient(red, green, blue);
}
形状为圆形的径向渐变
#grad {
background: -webkit-radial-gradient(circle, red, yellow, green);
background: -o-radial-gradient(circle, red, yellow, green);
background: -moz-radial-gradient(circle, red, yellow, green);
background: radial-gradient(circle, red, yellow, green);
}
颜色不均匀的径向渐变
#grad {
background: -webkit-radial-gradient(red 5%, green 15%, blue 60%);
background: -o-radial-gradient(red 5%, green 15%, blue 60%);
background: -moz-radial-gradient(red 5%, green 15%, blue 60%);
background: radial-gradient(red 5%, green 15%, blue 60%);
}