css渐变属性 - 技术栈

css渐变属性

白以昂2024-03-15 16:28

主要有三种属性

线性渐变
径向渐变
锥形渐变

线性渐变

background-image: linear-gradient(方向, 色值1 色值区间, 色值2 色值区间, ...色值n 色值区间);

渐变方向：

一种是利用方位名词 to right to left to top to left top等等

另一种是利用角度（推荐）这种更为精确

角度原则：想象成一个圆，从圆心向外延半径方向有个小箭头，也就是指向渐变方向，箭头指向上为0deg，以后顺时针为正，逆时针为负（当然，只用证书转一圈也是可以的，甚至大于360都是无所谓的）

css 复制代码

.box {
    height: 300px;
    width: 300px;
    background: linear-gradient(720deg, red 50px, blue 70px);
  }

//色值区间以这个例子来说，这里50px之前都是红色，50px到70px是渐变区间，70px之后都是蓝色

径向渐变

就是从圆心开始向四周扩散

background-image: radial-gradient(渐变形状圆心位置, 色值1 色值区间, 色值2 色值区间, ...色值n 色值区间);

渐变形状有两个关键字

circle 正圆
ellipse 椭圆

另外也可以用横坐标和纵坐标的半径

正圆 50px 50px
椭圆 150px 50px

圆心位置可以用方位名词和坐标

例如：at left top 或者 at 80px 160px

css 复制代码

.box {
    height: 300px;
    width: 300px;
    background: radial-gradient(50px 100px, red 20px, blue 200px);
}s

锥形渐变

沿着一个圆的半径的切向渐变

background-image: conic-gradient(从哪个角度开始渐变轴心, 色值1 色值区间, 色值2 色值区间, ..., 色值n 色值区间);

要注意这里的色值区间是以deg为单位的

从哪个角度开始渐变

角度于线性渐变角度一样，都是从正上方为0deg

要利用from关键字，比如from 90deg

轴心

类似于这个图，里面的(x0, y0)坐标就是轴心

例子

css 复制代码

.box {
    height: 300px;
    width: 300px;
    border-radius: 150px;
    background-image: conic-gradient(from 90deg, green 20deg, yellow 30deg, red 180deg);
  }