🟡CSS颜色与渐变

本文最后更新于：2024年4月25日 上午

颜色表示

HEX

rgb与rgba

渐变

线性渐变

🍉设置渐变

linear-gradient(color1, color2, ..., colorN)

1
2
3
4
5
6
7
.div1 {
  background-image: linear-gradient(#0093E9, #80D0C7);
}

.div2 {
  background-image: linear-gradient(#E0C3FC, #0093E9, #80D0C7);
}

效果如下:

1
2

🍉渐变方向

linear-gradient([to top | to bottom | to right | to left])

linear-gradient([to top left | to top right | to bottom left | to bottom right])

linear-gradient([ 0deg | 45 deg | 37deg |...])

1
2
3
4
5
6
7
8
9
10
11
.div1 {
  background-image: linear-gradient(to right, #0093E9, #80D0C7);
}

.div2 {
  background-image: linear-gradient(to bottom left, #0093E9, #80D0C7);
}

.div3 {
  background-image: linear-gradient(30deg, #0093E9, #80D0C7);
}

效果如下:

1
2
3

默认自上向下渐变

角度竖直向上为0deg,顺时针旋转

🍉渐变梯度

可指定颜色结束(渐变开始)位置

linear-gradient(color1 [ n(px | % | rem | vw ...)],)

1
2
3
4
5
6
7
8
9
10
11
.div1 {
  background-image: linear-gradient(#E0C3FC 50%, #0093E9 75%, #80D0C7 85%);
}

.div2 {
  background-image: linear-gradient(#E0C3FC 50%, #0093E9 50%, #80D0C7 85%);
}

.div3 {
  background-image: linear-gradient(#E0C3FC 50%, #0093E9 50%, #0093E9 75%, #80D0C7 75%);
}

效果如下:

1
2
2

当相邻颜色结束位置相同(无渐变空间)时可创建硬渐变(如div2与div3)

🍉渐变重复

repeating-linear-gradient(......, colorN n px)

1
2
3
.div1 {
  background-image: repeating-linear-gradient(#85FFBD, #FFFB7D 10px, #85FFBD 30px);
}

效果如下:

1

径向渐变

🍒创建径向渐变

1
2
3
.div1 {
  background-image: radial-gradient(#E0C3FC, #0093E9, #80D0C7);
}

效果如下:

1

🍒渐变梯度

1
2
3
.div1 {
  background-image: radial-gradient(#E0C3FC 50%, #0093E9 75%, #80D0C7);
}

效果如下:

1

🍒渐变形状

1
2
3
4
5
6
7
.div1 {
  background-image: radial-gradient(ellipse, #E0C3FC, #0093E9, #80D0C7);
}

.div2 {
  background-image: radial-gradient(circle, #E0C3FC, #0093E9, #80D0C7);
}

效果如下:

1
2

默认为ellipse

🍒渐变重复

1
2
3
4
5
6
7
.div1 {
  background-image: repeating-radial-gradient(#E0C3FC, #0093E9, #80D0C7 30%);
}

.div2 {
  background-image: repeating-radial-gradient(#E0C3FC, #E0C3FC 10%, #0093E9 10%, #0093E9 20%, #80D0C7 20%, #80D0C7 30%);
}

效果如下:

1
2

边框渐变

1
2
3
4
5
.div1 {
  border: 4px solid;
  border-image-source: linear-gradient(to bottom left, #0093E9, #80D0C7);
  border-image-slice: 1;
}

效果如下:

1

参考文档:

《CSS渐变 (w3school)》

CSS > 基础
#CSS
🟡CSS颜色与渐变
https://qingshaner.com/CSS渐变/
作者
清山
发布于
2022年3月6日
许可协议