css初学者在项目中实现卡片阴影效果

卡片灯罩很简单；调整参数；先垂直，后模糊；使用rgba为透明色；圆角必须与模糊相匹配。

怎样设置 HTML 元素的阴影效果

说白了，CSS阴影就是利用box-shadow和text-shadow来给元素赋予立体效果，但是比较复杂，而且参数堆叠起来很容易出问题。

拓展一下，先说最重要的盒子阴影。
去年我们运行了活动页面 H5 ，并为按钮添加了水平偏移 5 px 和模糊半径 1 0px 的阴影。
我们当时觉得这很酷。
然而我们发现，当用户使用 iPhone 1 1 Pro 时，2 0px 模糊直接将帧率推至每秒 3 0 帧。
用行话来说，这称为雪崩效应。
前面的一点延迟实际上会减慢后面的整个过程。
另一点是更多的阴影。
例如，在卡片上添加两个01 px和02 px的叠加阴影可以显着改善三维效果。
然而我们去年的测试发现，超过三层阴影后，低端机型的渲染时间会增加一倍。
还有另一个关键细节。
虽然扩展半径可以扩大阴影，但我们去年就测试过。
对于大约3 000个列表项，每个列表项的扩展半径为5 px，打包后CSS大小直接增加了5 0KB。

起初我以为内部灯罩插件会直接将盒子挖空。
后来我发现使用倾斜变换可以创造出更自然的凹效果。
不过请注意，我们今年优化某电商详情页时，发现阴影会使滚动延迟增加3 0%，因为浏览器会重新计算内部空间。

最后，提醒一下。
虽然用伪元素替换阴影可以节省性能，但在调试过程中经常会出现错误。
例如，如果您向 ::after 添加 5 px 底部偏移量，并且忘记为主元素留出相同的空间，则阴影将从框的边缘“生长”出来。