box-shadow 盒子阴影

1. html 结构

<div class="container">
    <div class="box">
      <h3>Heading</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam aspernatur illum in? Nihil ullam iusto, vitae laboriosam nisi suscipit pariatur aliquid unde aliquam assumenda corporis.</p>
    </div>
    <div class="box">
      <h3>Heading</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam aspernatur illum in? Nihil ullam iusto, vitae laboriosam nisi suscipit pariatur aliquid unde aliquam assumenda corporis.</p>
    </div>
    <div class="box">
      <h3>Heading</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam aspernatur illum in? Nihil ullam iusto, vitae laboriosam nisi suscipit pariatur aliquid unde aliquam assumenda corporis.</p>
    </div>
  </div>

2. css样式

.container {
      display: flex;
    }
    .box {
      padding: 1rem;
      margin: 1rem;
      background-color: coral;
      color: #ffffff;
      box-shadow: 10px 10px teal;
      box-shadow: -5px 5px 20px rebeccapurple;
      box-shadow: 3px 3px 5px blue, -3px -3px 5px green;
    }

3. 讲解

1.  box-shadow: 水平阴影 垂直阴影 阴影模糊 模糊扩散 阴影颜色 内外阴影;

2.  box-shadow: 水平阴影 垂直阴影 阴影模糊 阴影颜色, 水平阴影 垂直阴影 阴影模糊 阴影颜色;