本文意译自Making iOS 7 squircles using CSS3

如果你有认真看过ios7的应用图标,你会发现它并不是普通的那种方形加圆角效果的图标,而是更接近圆形和方形的混血儿(我们可称之为Squircle),在水平向和垂直向的圆角值并不一样。

本示例尝试使用css3实现类似的图标效果,利用元素的伪类结合css的clip属性来实现上述特殊的圆角效果。

Squircle - 默认效果










Squircle效果与传统圆角效果的对比








实现过程图解











Hover效果 - 收缩(Pinch)










Hover效果 - 放大至圆形