公共头部底边阴影

方式一

在内容区外层再加一个div,实现阴影效果

<template>
  <div class="header-box">
    <div class="header-shadow">
      <div>内容</div>  
    </div>
  </div>
</template>

<style lang="stylus" scoped>
.header-box
  width 100%
  background-color #fff 
  .header-shadow 
    background-color #fff 
    width 100%
    height 150px    
    box-shadow: 0px 8px 20px 0px rgba(0, 0, 0, 0.08);
</style>

方式二

在网上找到以下方式，但是发现不适合作为公共头部的底边阴影,记录如下

body:before {
  content: "";
  position: fixed;
  top: -10px;
  left: 0;
  width: 100%;
  height: 10px;
  -webkit-box-shadow: 0px 0px 10px rgba(0,0,0,.8);
  -moz-box-shadow: 0px 0px 10px rgba(0,0,0,.8);
  box-shadow: 0px 0px 10px rgba(0,0,0,.8);
  z-index: 100;
}