在 CSS 中尝试超椭圆圆角

[toFrankie]

开始

说到「超椭圆 Superellipse」可能很多人不了解，但小米于 2021 年 3 月 30 日发布的全新 LOGO 很多人不陌生。没错，它就是超椭圆的一个例子，长这样 👇

当时雷总刚开完发布会，小米旗下的网站还没来得及更换全新的 LOGO，然后开发同学直接拉了个 border-radius 为 19px 的圆角（没记错的话）还被各大网友调侃，哈哈。现在已经换上了一个 SVG 图形。

<svg xmlns="http://www.w3.org/2000/svg" width="50" viewBox="0 0 808 808">
  <g>
    <path fill="#ff6900" d="M723.79,84.42C647.55,8.48,537.94,0,404,0,269.89,0,160.12,8.58,83.92,84.72S0,270.43,0,404.39,7.74,648,84,724.14,269.9,808,404,808s243.85-7.71,320-83.86,84-185.78,84-319.75C808,270.25,800.16,160.54,723.79,84.42Z"></path>
    <path fill="#fff" d="M374.26,553.72a5,5,0,0,1-5.06,5H300.3a5.05,5.05,0,0,1-5.12-5V373.53a5.05,5.05,0,0,1,5.12-5h68.9a5,5,0,0,1,5.06,5Z"></path>
    <path fill="#fff" d="M509.18,553.72a5.05,5.05,0,0,1-5.09,5H438.5a5,5,0,0,1-5.1-5V398.26c-.07-27.15-1.62-55-15.64-69.06-12-12.09-34.51-14.86-57.88-15.44H241a5,5,0,0,0-5.07,5v235a5.07,5.07,0,0,1-5.12,5H165.16a5,5,0,0,1-5.06-5V254.31a5,5,0,0,1,5.06-5H354.52c49.49,0,101.22,2.26,126.74,27.81s27.92,77.3,27.92,126.85Z"></path>
    <path fill="#fff" d="M644.29,553.72a5.06,5.06,0,0,1-5.09,5H573.57a5,5,0,0,1-5.08-5V254.31a5,5,0,0,1,5.08-5H639.2a5.06,5.06,0,0,1,5.09,5Z"></path>
  </g>
</svg>

CodePen

在大学时期，那会做小米主题接触到超椭圆，然后就迷上了。在以前，iOS 的应用图标总是要比 Android 好看一些，原因就在它圆角上。当然，现在看国内几家系统都已经用上了，爽！

简单来说，它比普通圆角，看起来更舒服、更自然。

超椭圆

超椭圆（Superellipse）也称为拉梅曲线（Lamé curve），是在笛卡儿坐标系下满足以下方程式的点的集合：

$|\frac{x}a|^{n} + |\frac{y}b|^{n} = 1$

未完待续...