下滑滚动阴影解决方案

1. backgroud，限制高度，加overflow，codeopen, 只是在内容上边加阴影

  .g-scroll {
    top: -1px;
    position: relative;
    height: 500px;
    overflow-y: scroll;
    overflow-x: hidden;
    background:
        linear-gradient(#fff, transparent) top / 100% 100px,
        radial-gradient(at 50% -15px, rgba(0, 0, 0, .8), transparent 70%) top / 100000% 12px;
    background-repeat: no-repeat;
    background-attachment: local, scroll;
}
// 限制内容高度
    <div class="form-content g-scroll ">

 

2. shadow标签，计算宽度，没有限制 不是全屏，需要计算宽度， dom结构，header->shadow->main

header{
  position: sticky;
  background: #fff;
  top: 0;
  font-size: 20px;
  padding: 10px;
  z-index: 1;
}
shadow::before{
  content: '';
  box-shadow: 0 0 10px 1px #333;
  position: fixed;
  width: 100%;
}
shadow::after{
  content: '';
  width: 100%;
  height: 30px;
  background: linear-gradient(to bottom, #fff 50% , transparent);
  position: absolute;
}
fixed是相对于html中window元素的，所以如果纯CSS你是不能实现和其父元素宽度相等的，给你两个解决方案：
1、fixed下设置width和其父元素值相等；
2、fixed换成absolute；

　　3. 样式再复杂一点就要用js了。。。。