box-shadow

语法：

1
box-shadow: x轴 y轴 模糊距离 阴影尺寸 颜色 内/外

模糊距离：模糊阴影扩散的大小
阴影尺寸：阴影固定的宽高
模糊距离和阴影尺寸

颜色 hsl()

语法：

1
hsl(色相，饱和度，亮度)

饱和度：灰度。饱和度越高，颜色中的灰色越少，值为 0% - 100%，0% 即全灰，100% 无灰
亮度：值为 0% - 100%，0% 即黑色，100% 为最亮

linear-gradient

语法：

1
background: linear-gradient(方向，颜色-停止)

方向：有两种写法（默认方向为由上到下）
2、写方向
3、写角度（值 0deg 等于向上（to top）。值 90deg 等于向右（to right）。值 180deg 等于向下（to bottom））
颜色-停止：停止为可选值，表示该颜色渐变停止的位置（0% - 100%之间）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
.a1 {
  background: linear-gradient(to left,#cff 80%, #fcc);
}
.a2 {
  background: linear-gradient(to left bottom,#cff 30%, #fcc);
}
.a3 {
  background: linear-gradient(#cff, #fcc);
}
.a4{
  background: linear-gradient(0deg,#cff, #fcc);
}
.a5{
  background: linear-gradient(180deg,#cff, #fcc);
}
.a6{
  background: linear-gradient(360deg,#cff, #fcc);
}

<div class="a1">从右往左，第一个颜色在渐变80%位置结束</div>
<div class="a2">从右上往左下，第一个颜色在渐变30%位置结束</div>
<div class="a3">默认</div>
<div class="a4">0度</div>
<div class="a5">180度</div>
<div class="a6">360度</div>

linear-gradient

repeating-linear-gradient

语法：

1
background: repeating-linear-grandient(方向，颜色-结束，颜色-结束)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
div {
  width: 280px;
  height: 280px;
  float: left;
  margin-right: 20px;
  background: #000;
}
.a1{
  background-image: repeating-linear-gradient(-45deg,
  transparent,
  transparent 25px,
  rgba(255,255,255,1) 25px,
  rgba(255,255,255,1) 50px);
}
.a2{
  background:repeating-linear-gradient(0.125turn, transparent, #a18cd1 40px),repeating-linear-gradient(-0.125turn ,transparent, #fbc2eb 40px);
}

<div class="a1"></div>
<div class="a2"></div>

repeating-linear-gradient

radial-gradient() 径向渐变

语法：

1
background-image: radial-gradient(形状，尺寸，位置，颜色，颜色)

形状：

  • ellipse 椭圆（默认）
  • circle 正圆
    尺寸：
  • farthest-corner（默认） 以距离圆心最远的一角为渐变半径
  • farthest-side 以距离圆心最远边为渐变半径
  • closest-side 以距离圆心最近边为渐变半径。
  • closest-corner 以距离圆心最近角为渐变半径
    位置：
  • center
  • bottom
  • top
  • left
  • right
  • 其他（坐标）
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
#grad1 {
  background-image: radial-gradient(closest-side at top, blue, green, yellow, black);
}

#grad2 {
  background-image: radial-gradient(circle  farthest-side at left, blue, green, yellow, black);
}

#grad3 {
  background-image: radial-gradient(closest-corner at center, blue 15%, green 60%, yellow 70% black);
}

#grad4 {
  background-image: radial-gradient(farthest-corner at 70% 35%, blue, green, yellow, black);
}

railal-gradient

repeating-radial-gradient

语法：
同 radial-gradient
使用说明：
参考 linear-gradient 和 repeating-linear-gradient 的区别