Beyond border-radius: What The CSS corner-shape Property Unlocks For Everyday UI

核心发现

CSS corner-shape 属性终于让开发者摆脱了 border-radius 的限制，开启了斜切、挖角、圆角等新形状的可能性。

主要值

• round - 默认值，常规圆角
• squircle - 超级椭圆，苹果风格的圆角正方形
• bevel - 斜切角，直线连接两个半径端点
• scoop - 凹角，反向曲线
• notch - sharp inward cuts 尖锐向内切割

渐进增强策略

当前仅 Chrome 139+ 支持，但完美适用于渐进增强：

@layer demo {
  @supports (corner-shape: bevel) {
    /* 升级样式 */
  }
}

亮点

• 边框、阴影、背景都会跟随声明的形状
• 可通过 superellipse() 函数进行细粒度控制
• 支持按角分别设置不同形状
• 值可以平滑动画过渡