[注解] [304] 切角效果 #38

花絮与注解

第 70 页 · 底部 “关于未来” 区块

未来，我们再也不需要费尽心机地动用 CSS 渐变、裁切或 SVG 来实现这个效果了。CSS 背景与边框（第四版）将引入一个全新的属性 corner-shape，可以彻底解决这个痛点。

我在第二届 CSS Conf（CSS 开发者大会）上作了一个名为《重拾 CSS 的乐趣》的演讲。在这个演讲的下半部分，我提到了 “内凹圆角” 效果。

_{《重拾 CSS 的乐趣》幻灯片截图}

曾有开发者提议 “让 border-radius 接受负值以生成内凹圆角”（如上图所示），不过 CSS 工作组并没有采纳。尽管如此，这个需求并没有被遗忘。果然，在 “背景与边框（第四版）” 草案中，新增了一个叫作 corner-shape 属性，用于扩展 border-radius 的功能。

如果我们想要得到内凹圆角的效果，在未来很可能只需要这样写：

border-radius: 20px;
corner-shape: scoop;

这个新增的属性还可以让我们得到方形（notch）或斜面（bevel）的切角效果。虽然此时 border-radius 这个属性名稍显怪异，但好歹解决了一个大痛点，可谓喜大普奔！

但实际上 corner-shape 这个属性的诞生也并非一帆风顺。

这个想法最早由 CSS 工作组特邀专家 fantasai（国内开发者称她为 “CSS 女神”）提出，并加入了背景与边框（第四版）的编辑草案（WD）中。当时这个属性还叫作 border-corner-shape。

本书的作者 Lea Verou 在听到这个想法后兴奋不已，开发了 一个预览页面，向大众演示这个新属性的神奇功能。

_{Lea Verou 开发的 corner-shape 预览页面}

但此时 CSS 工作组内出现了一些质疑的声音，认为现实中并不存在这个属性的适用场景，要求从草案中删除。为了挽救这个襁褓中的婴儿，Lea 不得不向网友求助，征集实际案例。网友的反馈相当热烈，这个实用属性也得以保留。

如今，这个属性仍然处于 WD 阶段，还没有一款浏览器实现相关的功能。让我们共同祈盼它早日落地吧！

交流与答疑

（暂无）