CSS|盒子阴影

使用box-shadow可以设置盒子的阴影，它有六个参数，其中前两个是必选的

box-shadow: 阴影的水平位置 阴影的垂直位置 模糊距离 阴影的尺寸阴影的颜色 外部或内部

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>盒子阴影</title>
  <style>div{
      width: 300px;
      height: 300px;
      margin-left: 20px;
      margin-top: 20px;
      border: 10px solid yellow;
      background-image: url("../resource/image/img.png");
      background-size: cover;
      /*box-shadow:水平位置，垂直位置，模糊距离，阴影尺寸，阴影颜色，inset*/
      box-shadow: 20px 20px 100px 10px yellow;
    }</style>
</head>
<body>

<div></div>

</body>
</html>

CSS|盒子阴影_css

这样子写5个参数，会默认是外部阴影，如果添加上inset参数，那么会变为内部阴影：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>盒子阴影</title>
  <style>div{
      width: 300px;
      height: 300px;
      margin-left: 20px;
      margin-top: 20px;
      border: 10px solid yellow;
      background-image: url("../resource/image/img.png");
      background-size: cover;
      /*box-shadow:水平位置，垂直位置，模糊距离，阴影尺寸，阴影颜色，inset*/
      box-shadow: 20px 20px 100px 10px yellow inset;
    }</style>
</head>
<body>

<div></div>

</body>
</html>

CSS|盒子阴影_css_02

人生没有白走的路，每一步都算数！