最近苹果的M1芯片上市，性能增强，功耗降低，集成度进一步提升。增加了各种黑科技之后，居然还有空间集成了两个内存条进去。口口声声说是为全新的Mac系统打造，没想到他不讲武德，一眨眼又塞到了最新的iPad里面。大有统一江湖的气势。废话少说，步入正题。
涉及知识点：
- linear-gradient
- border
- outline
- -webkit-background-clip:text;
- color:transparent;
- SVG
发布会上我看到M1芯片这个设计图不错，打算用css手写一个。
首先是芯片体：
.apple{
width: 200px;
height: 200px;
background:#000;
}
嗯，一下就感觉特别像了。
第二步再加上背景的虚影。
开始我是想用box-shadow但是他这个背景有四个颜色呀。一顿操作后觉得效果并不理想。于是我想到了background的多背景设置，因为这个背景需要虚化滤镜，所以用了before伪类
.apple::before{
...
filter: blur(15px);
border-radius:50px;
background: linear-gradient(125deg,#ff8b78,rgba(255,0,0,0) 70%),
linear-gradient(215deg,#0099ff,rgba(255,0,0,0) 70%),
linear-gradient(-45deg,#251a4a,rgba(255,0,0,0) 70%),
linear-gradient(45deg,#ff0545,rgba(255,0,0,0) 70%);
}
背景设置成黑色就成这样了
是不是有内味儿了！当我仔细观察的时候发现，事情并没有我们想象的那么简单。苹果的设计师还是很注重细节的。
加边框
看到没有，这个黑色背景的边上居然有一圈半透明的不明物质.
再定眼(睛)一看黑色的底色上，隐隐约约有一个倒角，真会玩。但是，这也难不倒咱！border和outline就是干的。安排！
.apple{
...
border:2px outset rgba(255,255,255,0.2);
outline:2px outset rgba(255,255,255,0.1);
background:#000;
}
好了，背景弄得差不多了，下面就是文字了。
加文字
看到没，连logo和文字都是渐变的，多认真，多敬业。是时候拿出 -webkit-background-clip:大法了！记得吧color设置成transparent;
.apple::after{
-webkit-background-clip:text;
color:transparent;
}
为了让渐变看的明显我找了一个比较粗的字体。剩下的就相对简单了，找一个svg的苹果logo加上。
成品图，可能颜色有点不太鲜艳，但是绝对可以以假乱真了。打完收工！ 下面是完整代码：
html
<link href="https://fonts.googleapis.com/css?family=Anton" rel="stylesheet">
<div class="apple">
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 22.773 22.773" style="enable-background:new 0 0 22.773 22.773;" xml:space="preserve">
<defs><linearGradient id="MyGradient"><stop offset="5%" stop-color="#50565e"/><stop offset="95%" stop-color="#8a919c"/></linearGradient>
</defs>
<g>
<path fill="url(#MyGradient)" d="M15.769,0c0.053,0,0.106,0,0.162,0c0.13,1.606-0.483,2.806-1.228,3.675c-0.731,0.863-1.732,1.7-3.351,1.573
c-0.108-1.583,0.506-2.694,1.25-3.561C13.292,0.879,14.557,0.16,15.769,0z"/>
<path fill="url(#MyGradient)" d="M20.67,16.716c0,0.016,0,0.03,0,0.045c-0.455,1.378-1.104,2.559-1.896,3.655c-0.723,0.995-1.609,2.334-3.191,2.334
c-1.367,0-2.275-0.879-3.676-0.903c-1.482-0.024-2.297,0.735-3.652,0.926c-0.155,0-0.31,0-0.462,0
c-0.995-0.144-1.798-0.932-2.383-1.642c-1.725-2.098-3.058-4.808-3.306-8.276c0-0.34,0-0.679,0-1.019
c0.105-2.482,1.311-4.5,2.914-5.478c0.846-0.52,2.009-0.963,3.304-0.765c0.555,0.086,1.122,0.276,1.619,0.464
c0.471,0.181,1.06,0.502,1.618,0.485c0.378-0.011,0.754-0.208,1.135-0.347c1.116-0.403,2.21-0.865,3.652-0.648
c1.733,0.262,2.963,1.032,3.723,2.22c-1.466,0.933-2.625,2.339-2.427,4.74C17.818,14.688,19.086,15.964,20.67,16.716z"/>
</g>
</svg>
</div>
css
body{
background: #000;
font-family: 'Anton', sans-serif;
font-size:58px;
}
.apple{
position: relative;
top:100px;
left:300px;
width: 200px;
height: 200px;
color:#fff;
line-height:100px;
text-align: center;
text-transform: uppercase;
border:2px outset rgba(255,255,255,0.2);
outline:2px outset rgba(255,255,255,0.1);
background:#000;
}
.apple>svg{
position: absolute;
width: 70px;
top:43%;
left:60px;
transform:translate(-50%,-50%);
}
.apple::after{
position: absolute;
content:"M1";
left:100px;
top:45px;
-webkit-background-clip:text;
color:transparent;
background-image:linear-gradient(70deg,#8b8f9b 30%,#ebebeb);
}
.apple::before{
position: absolute;
z-index: -1;
width: 130%;height: 130%;
top:-15%;left:-15%;
content:"";
filter: blur(15px);
border-radius:50px;
background: linear-gradient(125deg,#ff8b78,rgba(255,0,0,0) 70%),
linear-gradient(215deg,#0099ff,rgba(255,0,0,0) 70%),
linear-gradient(-45deg,#251a4a,rgba(255,0,0,0) 70%),
linear-gradient(45deg,#ff0545,rgba(255,0,0,0) 70%);
animation:bigSmall 5s linear infinite;
}
@keyframes bigSmall {
0%{
transform:scale(1);
}
50%{
transform:scale(1.1);
}
100%{
transform:scale(1);
}
}
