AI 摘要： 本期 Smashing Newsletter #514 聚焦于 CSS 的最新技术和工具，介绍了多项创新功能和实用资源，包括 CSS 中的 if() 函数、锚点定位 API、缓动函数工具、阴影匹配技巧以及 CSS 渐变效果等。

1. CSS 新特性（Chrome 137）：
• 介绍了 if() 函数，支持基于自定义属性值和样式查询编写逻辑样式，增强了 CSS 的逻辑控制能力。
• reading-flow 属性通过声明预期的焦点顺序提升键盘和屏幕阅读器的可访问性，解决视觉顺序与 DOM 源顺序不匹配的问题。

2. CSS 径向渐变创建 CSS 爆炸背景效果
• Chris Coyier 展示了如何仅用 CSS 创建爆发背景效果，利用 conic-gradient() 和硬性停止点的特性，结合径向渐变实现文本空间和视觉层次。

3. CSS 缓动函数工具（Easing Wizard）
• Matthias Martin 开发的 Easing Wizard 工具帮助开发者可视化和测试 CSS 缓动函数，支持多种类型（如 Bézier、弹簧、反弹等），并提供预设和代码导出功能。

4. 跨平台阴影匹配
• Marc Edwards 提供了一份阴影转换比例表，帮助开发者在 CSS、Android、iOS、Figma 和 Sketch 等平台间实现一致的阴影效果，尽管渲染差异无法完全消除，但可接近匹配。

5. CSS 锚点定位 API 工具
• Una Kravets 开发的 Anchor Position Tool 简化了锚点定位 API 的使用，通过可视化界面展示元素相对锚点的定位效果，并生成可直接使用的 CSS 代码。

6. HTML 输入图标样式修复
• Cassidy Williams 分享了一个解决暗模式下日期/时间输入图标不可见的技巧，利用 ::-webkit-calendar-picker-indicator 伪元素调整图标样式，支持滤镜、不透明度和自定义图像。

Frontend Masters

CSS Bursts with Conic Gradients

You can make stripes with CSS gradients pretty easily. It’s that classic thing where you don’t fade a color from one to another, you just switch colors by having two colors share the same “color stop”. I made this one time to explain that: