HTML CSS 演示小米 logo 的变化 border-radius 属性设置圆角
一、效果
二、代码
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="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 10px rgba(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>
<div class="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"（生命感）。随着小米从手机厂商变成涵盖家电、甚至汽车的庞大生态，过于尖锐的棱角会显得有攻击性。圆润的造型传递的是"科技与生活融合"，更有亲和力，能包容更多品类（比如放在家电上，圆角确实比直角更不突兀）。
3. 营销层面：200 万买了个"热搜"
这可能是雷军最精明的一笔投资。
- 流量价值： 2021 年发布会时，"小米新 Logo"瞬间引爆全网，全网都在讨论"200 万改个圆角"、"我也能用 PS 做"。
- 实际效果： 这种争议带来了数以亿计的免费曝光。如果小米花 200 万去投硬广，绝对达不到这种"全民玩梗"的传播度。从营销角度看，这 200 万花得超值。
4. 前瞻性：为了小米汽车
现在回头看，这个设计非常有前瞻性。
- 当这个 Logo 放在 小米 SU7 的车头时，如果是方方正正的直角，会显得非常死板、廉价。
- 而这种圆润的超椭圆，配合车身的流线型设计，就显得非常和谐、高端。当时设计的时候可能就已经考虑到了未来进军汽车领域的视觉适配性。
总结
所以，我觉得这个 Logo 设计**"看着简单，实则不简单"**。
它看似只是加了个圆角，实则是用数学曲线 提升了视觉质感，用**"Alive"理念升级了品牌温度，顺便用 200 万撬动了上亿的营销流量**。这确实符合雷军"顺势而为"的商业智慧。