css渐变

CSS渐变是CSS世界中第一次真正意义上使用纯CSS代码创建的图像。它可以应用在任何需要使用图像的场景。

border-image
background-image

一、线性渐变 linear-gradient

基本语法：linear-gradient(渐变方向，颜色1 变化区间，颜色2 变化区间，。。。,颜色n 变化区间 )
渐变方向：
关键字： to + 方向（top, bottom, right, left), to left , to top, to top left, to left top
角度： 50deg
默认值：自上而下，to bottom, 180deg
变化区间（渐变断点）：
一个值: 作为颜色变化的边界
两个值: 作为区间的开始以及终止
重复线性渐变：repeating-linear-gradient();
注意：渐变区间的大小指的是在渐变方向的的小

element {
	background-image: linear-gradient(45deg, #fff 100px, skyblue 100px 200px, #fff 200px;
}

二、径向渐变 radial-gradient

基本语法：radial-gradient（ 形状 半径大小 at 原点位置 ，渐变颜色1 边界，渐变颜色2 边界，。。。， 渐变颜色n, 边界n）

位置：
at + background-postion的属性值
at + 关键字：center(默认值）top left right bottom, 可组合， at left at left top
at + 位置： at 0 0 ,at left 0 top 20px
形状：circle, ellipse
半径大小：
一个值：以圆的方式
两个值：以椭圆的方式
关键字：

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

三、锥形渐变 conic-gradient ()

基本语法：conic-gradient(from 起始角度 at 中心位置， 角渐变断点)

from 45deg
角渐变断点：只需要提供角度就可以