欢迎关注微信公众号：前端大佬经常在网页中使用阴影来突出层级关系，尤其是顶部导航，但有时设计感觉一开始就没有必要显示阴影，他们只滚动后出现。比如下面的例子，注意头部阴影，可以看到只有滚动后才会出现阴影。一般情况下，可以通过使用JS监听滚动事件，动态添加类名来实现。然而，经过一些实验，我发现仅使用CSS就可以轻松实现这种效果。下面是实现效果。也可以提前访问cssautoheadershadow（runjs.work）查看实际效果。那怎么实现呢，花两分钟来看看~1.head固定定位假设有这样一个布局很多contenttext简单修改一下header{background:#fff;字体大小：20px；padding:10px;}固定表头的方法有很多种，比较常见的是使用fixed来定位表头{position:fixed;top:0}但是固定定位不占空间。会挡住内容区域，所以一般需要预留一部分头部空间，比如main{margin-top:头部的高度}这里推荐使用粘性定位，可以保留顶部的同时吸收了top原有占位符header的效果{position:sticky;top:0}如下，但是没有影子。2.CSS实现原理要实现这种效果，需要一点“CSS技巧”。假设有一层阴影，默认情况下，它被一个元素遮挡，下面称为“occluder”。这里需要考虑各个部分的层级关系，有点复杂，如下图（侧面层级关系图），层级关系为：head>occluder>shadow>content在滚动过程中，阴影会自动变为可见，而遮挡物恰好又被头部遮住了。请注意，遮挡物和内容一起滚动。动态演示如下。原理是这样的。让我们看看具体的实现。3.CSS具体实现根据上面的原理，这里需要添加一个元素shadow和occluder可以使用伪元素生成a很多contenttext里面的阴影位置是固定的，不需要占用空间，所以可以直接使用fixed定位，也可以不设置top值，因为默认位置是在非定位position（这也体现了sticky的好处），即shadow::before{content:'';box-shadow:0010pxunderthehead1px#333;位置：固定；/*不需要top值*/width:100%;}fixed定位在没有设置top或者left值的情况下仍然在原来的位置，但是会固定在这个位置。遮挡物可以填充纯色，需要随内容滚动，不需要占用空间，为了提高层次，可以设置绝对定位shadow::after{content:'';宽度：100%；高度：15px；背景：#fff；位置：绝对；/*topvalueisnotrequired*/}绝对定位在没有设置top或left值的情况下，依然在原位置，也会随着内容滚动。下面来看层级关系。按照dom的顺序，此时的层级关系是：occluder>shadow>header>contentheader应该是最高的，所以需要改变层级header{/**/z-index:1;}的层级关系是：Head>Occluder>Shadow>Content这样就实现了文章开头展示的效果，效果如下3.Softershadow其实上面的效果已经很不错了，只是有点僵硬。仔细观察，在缓慢滚动的过程中，影子有一种“向上推进”的感觉。有什么办法可以让这个过程更柔和吗？喜欢透明度的变化？当然也是可以的，实现起来也比较简单。上面说的比较生硬，因为遮挡物是纯色的。改成半透明渐变不是更好吗？阴影::之后{高度：30px；background:linear-gradient(tobottom,#fff50%,transparent);}效果如下，让阴影的效果不再是“上推”的效果。你怎么认为？？重点来了~下面是完整的CSS代码（不到20行~）header{position:sticky;背景：#fff；顶部：0；字体大小：20px；填充：10px；z-index:1;}shadow::before{内容:'';框阴影：0010px1px#333；位置：固定；宽度：100%；}阴影::之后{内容：''；宽度：100%；高度：30px；线性渐变（到底部，#fff50%，透明）；position:absolute;}HTML结构也很简单很多内容文字可以访问在线链接CSSautoheadershadow(runjs.work)RunJS在线创建和分享前端代码。四、总结与展望以上就是本次分享的全部内容。你掌握了另一个CSS技巧吗？使用了3个定位属性，几乎是零成本，复制几行代码，马上就可以使用。总结一下实现要点：固定表头的布局建议用sticky实现。优点是可以保留header，无需额外保留保留的整体实现思路是css蒙眼法和css层级，相互遮挡固定定位在没有设置top或者left值的时候还是在原来的位置，但是会固定在这个位置。绝对定位依然是在没有设置top或者left值的时候原位置也会随着内容滚动。纯色遮挡在滚动时有点生硬，半透明渐变遮挡在滚动时会更柔和。以后可以通过@scroll-timeline来实现这种滚动相关的交互。有兴趣的可以提前了解这方面，但现在实际生产使用几乎不可能（目前需要手动启用实验性特性），可以预见随着CSS新特性的不断发展，比如“CSStricksandtricks”肯定会逐渐被官方取代，体验会更完美，但不代表这些想法没有用，实际需求是千万级的，官方一个也照顾不了一。就算有计划、有草稿，也可能是多年以后的事了，所以学习CSS不要停止思考，停止想象，这可能是CSS最有趣的部分了~最后，如果你觉得不错，对你有帮助，请点赞、收藏、转发???欢迎关注微信公众号：前端大侦探
