圆角按钮用了整整15年。从2010年border-radius诞生那天起，网页设计师就只有一种选择：圆。更圆。或者稍微不那么圆。没有第二种形状。

现在变了。CSS新增了一个属性叫corner-shape，同样的圆角参数，但角的形状由你说了算。圆角、平切、内凹、尖刻，开箱自带6种形态。

打开网易新闻 查看精彩图片

不过先泼冷水：目前只有Chrome Canary实验性支持，需要手动开flag。正式上线前记得查兼容性。

这个属性的核心规则很简单——corner-shape不能单独生效，必须配合border-radius。你可以理解为：border-radius画出角落的区域，corner-shape决定里面填什么形状。只写corner-shape: scoop毫无效果，加上border-radius: 30px才会出现内凹角。

六种形状逐个看。

第一种bevel，平切角。对角线直接切掉，适合游戏UI或者工业设计风格。边框、背景、阴影全部自动跟随，不用额外处理。

第二种scoop，内凹角。和圆角相反，曲线向里收。同样，边框、阴影、背景全部自适应，不需要hack。

第三种notch，尖刻角。scoop的极端版本，硬直的V型切口，按钮瞬间有了机械感。

第四种玩法是混合搭配。跟border-radius一样，可以四个角各不相同。一个值管四角，两个值交叉配对，四个值顺时针逐个指定。比如corner-shape: scoop notch，左上右下内凹，右上左下尖刻。

第五种round，就是默认圆角。第六种squircle，超椭圆，介于方圆之间，苹果产品图标的经典曲线。

还有个隐藏技能：全部形状都可以平滑动画。CSS会自动插值计算角的数学变化，不需要JavaScript。悬停时从圆角变平切再变内凹，0.5秒循环，按钮自己会呼吸。

三个立刻能用的场景：定价卡片用scoop制造卡片叠放的视觉层次；游戏按钮用notch强化科技感；加载状态用动画corner-shape替代旋转菊花，让等待不那么无聊。

15年等一个属性，听起来很久。但想想看这15年里，无数设计师用伪元素、SVG、clip-path各种hack模拟这些效果，现在一行CSS解决。技术债务终于还清了一点。