共 2 篇相关文章
这篇讲的是CSS3中`box-shadow`属性的完整用法。作者从自己U盘损坏、资料丢失的经历说起，引出了重新整理这篇属性详解文章的缘由。 文章核心围绕`box-shadow`展开，将其定义为“CSS模型边框阴影”，并详细拆解了其W3C规范中的每个参数值。从可选的`inset`（内阴影）开始，到必须设置的水平（`offset-x`）与垂直（`offset-y`）偏移量——作者用数轴坐标系进行了形象比喻。接着解释了`blur-radius`（模糊半径，值越大阴影越模糊）和`spread-radius`（扩展半径，正值扩大阴影，负值缩小）这两个控制阴影形态的关键值。 值得注意的是，文章不仅列出了属性语法，还提供了可交互的代码示例，直观展示不同参数组合产生的视觉效果。作者在序言中强调的“实践是检验真理的唯一标准”的学习态度，也贯穿了这篇注重实操的教程中。
这篇讲的是，CSS中实现阴影效果的两种主流方式——传统的`box-shadow`属性与新的`filter: drop-shadow`滤镜——之间该如何选择。作者从自己项目中为实现全方位阴影而编写冗长`box-shadow`代码的经历出发，对比了两种方案的实现与效果。 核心差异在于，`drop-shadow`滤镜能更真实地模拟光照下的阴影，因为它能感知元素的实际轮廓（包括透明区域），生成的阴影贴合形状，视觉上更自然。相比之下，`box-shadow`只能为元素的整体矩形边界框添加阴影。此外，两者的浏览器兼容性也不同，`filter`在Webkit内核浏览器（如Chrome、Safari）中已获得良好支持，而Firefox和IE则仍需依赖`box-shadow`。 因此，在面向现代浏览器开发时，`filter: drop-shadow`无疑是更优的选择，能用更简洁的代码实现更逼真的效果。对于需要兼容旧版浏览器的场景，则应继续使用`box-shadow`作为备选。文章提供了清晰的代码对比和在线示例，直观展示了两者的区别。
