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