Description
花絮与注解
第 70 页 · 底部 “关于未来” 区块
未来,我们再也不需要费尽心机地动用 CSS 渐变、裁切或 SVG 来实现这个效果了。CSS 背景与边框(第四版)将引入一个全新的属性
corner-shape
,可以彻底解决这个痛点。
我在第二届 CSS Conf(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 在听到这个想法后兴奋不已,开发了 一个预览页面,向大众演示这个新属性的神奇功能。
但此时 CSS 工作组内出现了一些质疑的声音,认为现实中并不存在这个属性的适用场景,要求从草案中删除。为了挽救这个襁褓中的婴儿,Lea 不得不向网友求助,征集实际案例。网友的反馈相当热烈,这个实用属性也得以保留。
如今,这个属性仍然处于 WD 阶段,还没有一款浏览器实现相关的功能。让我们共同祈盼它早日落地吧!
交流与答疑
(暂无)