【CSS】页面顶部阴影

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

纯 css，利用伪元素实现。不需要使用图片。

::before 是一个很好用的伪元素选择器，它的作用是在元素的内容之前插入新内容。

::before 详细用法：文档

实现阴影效果，使用了 box-shadow。

box-shadow 详细用法：文档

最后需要使用 z-index ，并且设置一个尽可能大的值，这样页面的顶部就永远会出现一个阴影。