全宽的上方阴影

[gaoryrt]

👆要达到这个效果，底 bar 在可滚动内容上有一个上阴影

放大一点：

[gaoryrt]

box-shadow 的语法：

.sub-bar {
  /* offset-x | offset-y | blur-radius | spread-radius | color */
  box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
}

这样通过缩小和平移，是可以写出来「上方阴影」的：

.sub-bar {
  box-shadow: 0 -5px 5px -5px rgba(0, 0, 0, 0.3)
}

.sub-bar {
  box-shadow: 0 -2.5px 5px -2.5px rgba(0, 0, 0, .3)
}

但是由于 blur 拥有圆角，上方全宽的阴影会在左右溢出，左右不溢出的上方不能均匀全宽。

把第二个例子的阴影颜色加深后如上图。单靠 box-shadow，不能做到单边全宽并且其他边不溢出。

[gaoryrt]

1. overflow: hidden

这个很简单，就是在父元素上把其他边的阴影给隐藏掉

.container {
    position: relative;
    overflow-x: hidden;
    overflow-y: auto;
}

[gaoryrt]

2. clip-path

同样是把其他边隐藏掉，使用 clip-path 不需要 container

.sub-bar {
     box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
     clip-path: polygon(0 -5px, 100% -5px, 100% 100%, 0% 100%)
}

顺便推荐一个在线生成器：http://bennettfeely.com/clippy/

[gaoryrt]

3. 阴影元素

不用 sub-bar 自带的阴影了，自己写一个

.shadow {
    position: absolute;
    bottom: 20px;
    left: 0;
    width: 100%;
    height: 5px;
    background: linear-gradient(transparent, rgba(0, 0, 0, .15));
  }