超越 border-radius：CSS corner-shape 属性为日常 UI 带来的无限可能 — Smashing Magazine

📌 一句话摘要

本文探讨了全新的 CSS corner-shape 属性，展示了它如何超越简单的圆角，通过渐进增强实现超椭圆（squircle）、斜切（bevel）和内凹（scoop）等复杂的 UI 形状。

📝 详细摘要

本文介绍了 corner-shape，这是一个与 border-radius 协同工作以定义元素角几何形状的新 CSS 属性。它取代了传统且脆弱的 clip-path 或 SVG 遮罩等黑科技，让边框和阴影能够自然地贴合形状。作者详细介绍了包括 squircle（苹果风格曲线）、bevel（斜切）、scoop（内凹）和 notch（切口）在内的各种值，以及精细调优的 superellipse() 函数。核心主题是“渐进增强”工作流，即开发者提供稳健的 border-radius 基准，并使用 @supports 为现代浏览器添加高级形状。通过从电子商务徽章到音乐播放器的五个实际 UI 演示，文章阐述了这些形状如何在不破坏旧浏览器布局的情况下，增强视觉层级和品牌个性。

💡 主要观点

- “corner-shape” 属性是一个强大的伴侣，它修改了现有 “border-radius” 属性所创建的特定几何形状。 它并不取代 border-radius，而是定义了曲线的路径，在允许实现斜切和内凹等形状的同时，确保边框、轮廓和阴影保持完美无损。

该属性实现了 CSS 中“超椭圆”（squircle）形状的原生支持，为现代 Web 界面提供了高级的美感。 这使得开发者无需复杂的 SVG 绕过方案即可实现由苹果 iOS 推广的平滑圆角美学，相比整个布局中标准的圆弧，提供了更精致、更自然的视觉效果。

采用渐进增强策略是实现这一新兴 CSS 特性同时保持广泛浏览器兼容性的核心方法。 通过利用 CSS @layer 和 @supports，开发者可以向所有用户提供高质量的基准设计，同时为使用现代 Chromium 内核浏览器的用户提供增强的、“更佳”的视觉体验。

原生角形状有效地解决了传统裁剪方法导致阴影和边框被切断的长期问题。 与物理切割元素的 clip-path 不同，corner-shape 改变了元素的实际盒模型几何形状，这意味着 box-shadow、轮廓和背景会自动适应新的角样式，无需任何脆弱的黑科技。

利用各种不同的角形状，设计师可以通过有意的几何选择来强化视觉层级并传达特定的内容含义。 作者演示了如何为推荐项目使用内凹（scoop）以增加编辑温度，为徽章使用斜切（bevel）以营造宝石般的质感，以及为标准卡片使用超椭圆（squircle）以暗示高级品质和一致性。

💬 文章金句

- 全新的 corner-shape 属性终于改变了现状，为斜切、内凹和超椭圆角打开了大门。

• 它并不取代它；它修改了 border-radius 所创建的曲线形状。
• 边框、阴影和背景都会遵循声明的形状，因为它本身就是该形状。
• 在我看来，corner-shape 是渐进增强的完美候选者，就像 Internet Explorer 6 时代的 border-radius 一样。
• 形状变成了视觉强调的工具，而不仅仅是装饰。

📊 文章信息

AI 评分：88

来源：Smashing Magazine

作者：hello@smashingmagazine.com (Brecht De Ruyte)

分类：产品设计

语言：英文

阅读时间：11 分钟

字数：2502

标签： CSS, Web 开发, UI 设计, 渐进增强, 前端工程

阅读完整文章