Page 87 - css揭秘

意到，要创建一个四分之一椭圆，其中一个角的水平和垂直半径值都需要是
100%，而其他三个角都不能设为圆角。由于这四个角的半径在水平和垂直
方向上都是相同的，我们甚至都不需要使用斜杠语法了。最终代码应该是这
样的：

border-radius: 100% 0 0 0;

你不免还会顺着往下想，是不是还能用 border-radius 来生成椭圆的
其他切块（比如八分之一椭圆、三分之一椭圆）？很遗憾，你可能会失望
了，因为 border-radius 属性是无法生成这些形状的。

图 3-10
Simurai 以其精湛的手法将
border-radius 发挥到了极致，
其 糖 果 按 钮（http://simurai.com/
archive/buttons）展示了各种奇妙
的形状

试一试 play.csssecrets.io/quarter-ellipse

„ CSS 背景与边框 相关规范
http://w3.org/TR/css-backgrounds

56 第 3 章 形状

඀ࠡ JOEC