理解CSS角形和超级椭圆的力量
The CSS corner-shape property represents one of the most exciting additions to web design’s geometric toolkit in recent years. Extending our ability to control the appearance of corners beyond the simple rounded edges we’ve become accustomed to with border-radius, this seemingly small addition unlocks a world of new possibilities that previously required complex SVG implementations or image-based solutions.
CSS corner-shape 属性代表了近年来网页设计几何工具包中最令人兴奋的新增功能之一。它扩展了我们控制角落外观的能力，超越了我们习惯于使用 border-radius 的简单圆角，这个看似微小的补充解锁了一个新的可能性世界，以前需要复杂的 SVG 实现或基于图像的解决方案。
As of this writing (June 2025), corner-shape is a very new feature with limited browser support, currently only available in Chrome (version M139 and above). The specification may still undergo changes. Try Chrome Canary right now to view these demos.
截至本文撰写时（2025年6月），corner-shape是一个非常新的特性，浏览器支持有限，目前仅在Chrome（版本M139及以上）中可用。该规范可能仍会发生变化。现在尝试Chrome Canary来查看这些演示。
Before we dive into the advanced capabilities of this property, let’s first understand the foundation it builds upon: the familiar border-radius property that has shaped our corners for over a decade.
在我们深入了解这个属性的高级功能之前，先让我们理解它所建立的基础：熟悉的 border-radius 属性，它已经塑造了我们的角落超过十年。
The border-radius property gave us the ability to easily create rounded corners on elements. At the max value, using absolute values (like pixels) creates pill shapes, while percentage values create consistent rounded corners. However, any non-zero radius would always create an elliptical curve.
border-radius属性使我们能够轻松创建元素的圆角。在最大值下，使用绝对值（如像素）会创建药丸形状，而百分比值则创建一致的圆角。然而，任何非零半径总是会创建一个椭圆曲线。
While it is a powerful and useful tool, sometimes we need something… different. This is where the new corner-shape property comes in, expanding our geometric vocabulary beyond just rounded corners.
虽然它是一个强大而有用的工具，但有时我们需要一些……不同的东西。这就是新的corner-shape属性的用武之地，它扩展了我们的几何词汇，不仅限于圆角。
The corner-shape property works as a companion to border-radius, where border-radius determines the ‘size’ of the curve, and corner-shape defines how that curve looks.
corner-shape 属性作为 border-r...