网站顶部边缘的阴影，如下所示
body::before {
content: "";
position: fixed;
top: -10px;
left: 0;
width: 100%;
height: 10px;
box-shadow: 0px 0 10px rgba(0, 0, 0, 0.8);
z-index: 100;
}顶部阴影
网站顶部边缘的阴影，如下所示
body::before {
content: "";
position: fixed;
top: -10px;
left: 0;
width: 100%;
height: 10px;
box-shadow: 0px 0 10px rgba(0, 0, 0, 0.8);
z-index: 100;
}
是的，但是如果在有内容的网站上使用 position:fixed，浏览器会变慢。也许你知道原因？
我进行了一些测试，但似乎没有发现任何减速。您有显示问题的测试页面吗？
没有，我尝试在我的网站上添加其他内容的代码并出现减速，我认为如果代码包含 position: fixed;，在没有内容的演示页面中会运行良好 )) 在真实网站中它很慢。
有内容，有滚动：http://jsbin.com/ejora3
没有减速。
重要的是进行测试。使用不同的内容创建一个测试页面，该页面确实会减速，然后我们可以从那里进行故障排除。
“简化测试用例” https://css-tricks.org.cn/reduced-test-cases/
请访问我的主页，您就会看到。使用 CMS 的其他皮肤可以正常工作。
对我来说滚动很好。如果对您来说不行，这意味着要么是 1) 浏览器/版本 2) 平台/版本 3) 您的计算机本身以及所有这些与您页面上的 HTML/CSS/JavaScript 结合使用。这就是简化测试用例的意义。添加顶部阴影，遇到减速，从页面中慢慢删除内容，直到问题解决，那么这就是导致问题的内容。或者反过来，添加顶部阴影，然后将内容添加回原本为空的页面中，直到它崩溃。您添加的最后一样东西就是问题所在。
我使用不同的浏览器在内存为 1GB 且运行 Win-x64 的机器上进行测试。Opera -11（非常慢），Safary（滚动不流畅）=（无论如何感谢。无论如何感谢。我会尝试找出原因。
我找到了。我的网站上很多文本都有 text-shadow。对不起，是我的错。
即使我的也变慢了，我使用的是最新版本的 Firefox，但在 Opera 中它非常快。
在我这边运行得很好，我应该使用它吗？
如果我想做同样类型的阴影，但从全宽度向上，应该如何更改？
有没有简单的方法在底部也实现这一点？我喜欢这种效果。
如果你想把它放在页面的底部 -
嗨，非常感谢您的技巧！我喜欢它（并且一直使用它）。
做得很好！我喜欢这个。
这是一个非常不错的资源，我很快就会使用它 :)
很棒的工作，
谢谢，它完美地工作。
wise
嗨，Chris
很棒的工作（一如既往。）
不过，有一个小而重要的问题。
当浏览器（支持 box-shadow 属性）渲染阴影时，它会自动逐像素绘制阴影，然后重复，文本阴影也是如此。
我说的对吗？
如果是这样，在完全相同的设置中，带有许多阴影元素的页面渲染速度会比没有阴影的页面慢。
渲染阴影所花费的时间不会相差太大，除非它达到某个点（取决于 RAM/浏览器以及其他一些因素）。
我说的对吗？
我甚至希望这样做，让阴影的左右边缘一直延伸到末端，而不是稍微缩短。
body:before {
content: "";
position: fixed;
top: -10px;
left: -10px;
width: 110%;
height: 10px;
-webkit-box-shadow: 0px 0px 10px rgba(0,0,0,.8);
-moz-box-shadow: 0px 0px 10px rgba(0,0,0,.8);
box-shadow: 0px 0px 10px rgba(0,0,0,.8);
z-index: 100;
}
不太明显，但只是一些像素完美的事情。
我在这里看到过：http://playground.genelocklin.com/depth/
我仍然不确定他们如何在 IE7 - IE8 上使其工作，有什么想法吗？
我通过添加 此浏览器检查 php 代码 以及一些条件语句来检查是否正在使用 IE，使其工作。在 IE 的情况下，我会让代码添加一个用于阴影的 标签作为 标签内的第一个元素，并从那里使用透明的 div 对其进行样式设置。当然，这是一个糟糕的解决方案。
哎呀；打字错误 - 我忘记了某些标签会被从注释中删除。它应该写成：“在 IE 的情况下，我会让代码添加一个 标签作为 标签内的第一个元素，并从那里使用带有 repeat-x 应用的 1px x 10px 透明 .png 文件对其进行样式设置”。
哇 - 即使标签分开，它们仍然会被删除..好吧..从现在开始没有小于号。
“在 IE 的情况下，我会让代码添加一个 [div] 标签作为 [body] 标签内的第一个元素，并从那里使用带有 repeat-x 应用的 1px x 10px 透明 .png 文件对其进行样式设置”。
非常感谢您提供这种很棒的解决方案，它可以提高效果的价值，而无需花费太多空间来实现效果。
大家好！
当我为带有
position: fixed的元素（例如谷歌论坛 (http://groups.google.com/a/gcoogleproductforums.com/forum/#!overview)）投下阴影时，这个主题对我有帮助。来自巴西朋友的拥抱！
我有一个设置为 1024 的标题，它会根据浏览器的宽度移动到页面的中心。
您如何将下拉阴影居中，并保持 1024 的固定宽度？
我发现如果你从主机而不是实际的计算机上查看它，效果会更好。我在我的计算机上保存了一个文档并查看了它，它会滞后，然后我将其放在主机上，它就不再滞后，或者至少没有明显的滞后。最好有一台速度较慢的计算机来测试网页，比现在大多数人使用的计算机都要慢。
我不太确定该如何解释，可能是我的测试计算机，但从主机上查看它的速度更快。
多么美丽而微妙的效果。我现在正在一个学校项目中使用它，而且我会将这个小宝石保存下来，将来再使用它几次。
非常感谢！
如果你想将其应用于“body”以外的其他元素，它很可能会对齐错误。以下是如何解决这个问题的技巧，添加以下内容
.element:before {position:relative; // 不是 fixed
top:-20px;
display:block;
}
在父元素中，设置相对位置。
再次感谢！没有废话，只有解决方案。您是最棒的！
如何修改它以同时在顶部和左侧产生阴影？
我想我已经明白了。需要 body::after
body::after {
content:””;
position:fixed;
top: 0px;
left:-10px;
width: 10px;
height: 100%;
-webkit-box-shadow: 0px 0px 10px rgba(0,0,0,.8);
-moz-box-shadow: 0px 0px 10px rgba(0,0,0,.8);
box-shadow: 0px 0px 10px rgba(0,0,0,.8);
}