如何在<div>后面添加模糊效果？

Question

我有这个：

我想像这样添加框阴影边框，以便我们可以看到白色部分：

目前，我的HTML结构如下：

<div class="card-post">

  <div class="top">
    <div class="my-container">

      <div class="left">
        <img src="profile-picture.svg" alt="">
      </div>

      <div class="middle">
        <p>Username</p>
      </div>

      <div class="right">
        <img src="more-btn.svg" alt="">
      </div>

    </div>


  </div>

  <div class="content">

  </div>

  <div class="bottom">
  </div>
</div>

Answer 1

您可以将box-shadow用于这种外观：

.left {
  background: lightblue;
}

.right {
  background: grey;
}

.middle {
  width: 100%;
  height: 250px;
  margin: 0;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

<div class="card-post">

  <div class="top">
    <div class="my-container">

      <div class="left">
        <img src="profile-picture.svg" alt="">
      </div>

      <div class="middle">
        <p>Username</p>
      </div>

      <div class="right">
        <img src="more-btn.svg" alt="">
      </div>

    </div>


  </div>

  <div class="content">

  </div>

  <div class="bottom">
  </div>
</div>

Answer 2

只需使用

.content {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.top-section {
  background: #293c7c;
  border-top-left-radius: 50px;
  border-top-right-radius: 50px;
  padding: 10px 20px;
  display: flex;
  align-items: center;
  
}
img.user-img {
    max-width: 100%;
}
.uname {
  font-size: 35px;
  color: #fff;
  text-align: left;
}
.dot-btn {
  max-width: 30%;
  float: right;
}
.content {
    height: 300px;
    margin: 0;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.bottom {
    background: #8b8b8b;
    height: 100px;
    border-bottom-right-radius: 50px;
    border-bottom-left-radius: 50px;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="container">
  <div class="row">
    <div class="col-md-12 col-sm-12 col-xs-12">
      <div class="top-section">
        <div class="col-md-2 col-sm-2 col-xs-2">
          <div class="left">
            <img class="user-img" src="https://upload.wikimedia.org/wikipedia/commons/d/d3/User_Circle.png" alt="">
          </div>
        </div>
        <div class="col-md-5 col-sm-5 col-xs-4">
          <div class="middle">
            <p class="uname">Username</p>
          </div>
        </div>
        <div class="col-md-5 col-sm-5 col-xs-8">
          <div class="right">
            <img class="dot-btn" src="https://d30y9cdsu7xlg0.cloudfront.net/png/334917-200.png" alt="">
          </div>
        </div>
      </div>
    </div>
    <div class="col-md-12 col-sm-12 col-xs-12">
      <div class="content">
      </div>  
    </div>  
    <div class="col-md-12 col-sm-12 col-xs-12">
      <div class="bottom">
      </div>
    </div>
  </div>
</div>