当前位置：首页 > news >正文

HTML CSS 演示小米 logo 的变化 border-radius 属性设置圆角

news 2026/6/23 21:37:03

HTML CSS 演示小米 logo 的变化 border-radius 属性设置圆角

一、效果

二、代码

<!DOCTYPEhtml><htmllang="zh-CN"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>小米 Logo - 带文字版</title><style>/* 页面居中布局 */body{display:flex;justify-content:center;align-items:center;height:100vh;margin:0;background-color:#f5f5f5;}.mi-box{width:200px;height:200px;background-color:#ff6700;/* 小米橙 */border-radius:20px;/* 圆角 */position:relative;/* 关键：为了让内部的文字绝对定位 */box-shadow:0 4px 10pxrgba(0,0,0,0.1);/* 加点阴影更好看 */}/* 使用 ::after 伪元素生成 "mi" 文字 */.mi-box::after{content:"mi";/* 这里写文字内容 */color:#fff;/* 白色文字 */font-size:100px;/* 文字大小 */font-weight:300;/* 字体粗细：细体 */font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;/* 文字居中 */position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);/* 调整字间距，让 mi 紧凑一点 */letter-spacing:-4px;}</style></head><body><divclass="mi-box"></div></body></html>

三、AI 怎么说

乍一看确实像是“随手加了个圆角”，甚至当时全网都在吐槽“雷军是不是被忽悠了”。但作为一个前端开发者，咱们如果深入扒一扒这背后的技术细节和商业逻辑，你会发现这200 万其实花得相当精明。

这不仅仅是“圆角”的问题，我结合当时的设计背景和后续效果，从以下几个角度来聊聊我的看法：

1. 技术层面：不是简单的`border-radius`

虽然看起来像 CSS 里的border-radius: 20px，但原研哉（Kenya Hara）团队实际上用的是数学公式。

超椭圆（Superellipse）：他们使用的是方程∣x∣n+∣y∣n=1|x|^n + |y|^n = 1∣x∣n+∣y∣n=1。
- 普通的圆角矩形，圆弧和直线的连接处往往会有视觉上的“断点”或突变。
- 小米的新 Logo 选择了n=3的曲线。这种曲线在数学上介于正方形（n=∞）和圆形（n=2）之间，它拥有连续的曲率。
前端视角的理解：这就像是 CSS 的八值语法（border-radius: 42% 58%...）与普通圆角的区别。虽然肉眼看差别细微，但在高精度的屏幕和工业制造（比如小米汽车 SU7 的车标）中，这种“连续曲率”会显得更饱满、更自然，没有生硬的棱角。

2. 品牌层面：从“极客”到“生活”

Logo 是品牌战略的视觉翻译。

旧 Logo（方）：棱角分明，代表的是“为发烧而生”，强调性能、硬核、极客精神。
新 Logo（圆）：概念叫“Alive”（生命感）。随着小米从手机厂商变成涵盖家电、甚至汽车的庞大生态，过于尖锐的棱角会显得有攻击性。圆润的造型传递的是“科技与生活融合”，更有亲和力，能包容更多品类（比如放在家电上，圆角确实比直角更不突兀）。