CSS 阴影效果text-shadow box-shadow

1.text-shadow
两个参数，水平阴影和垂直阴影

h1 {
  text-shadow: 2px 2px;
}

第三个参数，颜色。

h1 {
  text-shadow: 2px 2px red;
}

第四个参数 模糊效果颜色，第三个参数是模糊的像素效果，第四个是颜色。

h1 {
  text-shadow: 2px 2px 5px red;
}

可以施加多重效果

h1 {
  text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF;
}

2.box-shadow
水平和垂直像素

div {
  box-shadow: 10px 10px;
}

第三个参数是颜色

div {
  box-shadow: 10px 10px lightblue;
}

阴影模糊效果，第三个参数越大模糊越明显。第四个是颜色

div {
  box-shadow: 10px 10px 5px lightblue;
}

扩散半径。第四个值。其他值同上。

div {
  box-shadow: 10px 10px 5px 12px lightblue;
}

inset值，将外扩阴影变为内嵌阴影。

div {
  box-shadow: 10px 10px 5px lightblue inset;
}

多重阴影

div {
  box-shadow: 5px 5px blue, 10px 10px red, 15px 15px green;
}