filter:drop-shadow()和box-shadow虚线框阴影效果实例页面

展示

代码

• HTML：

  <h4>原始</h4>
  <div class="dashed"></div>
  <h4>box-shadow左，drop-shadow()右</h4>
  <div class="dashed box-shadow"></div>
  <div class="dashed drop-shadow"></div>

• CSS：

  .dashed {
      width: 100px; height: 100px;
      border: 10px dashed deepskyblue;
  }
  .box-shadow {
      box-shadow: 5px 5px 8px;
  }
  .drop-shadow {
      filter: drop-shadow(5px 5px 8px);
  }