听说微软的Edge换logo了？让我们用CSS手写个吧

前天看新闻，听说微软的 Edge 浏览器换了新的 logo，不看不要紧，一看就有了这篇文章。

Edge 和 旋转90°的 Firefox

刚看到这个 logo 的时候，我感觉似曾相识，作为脸盲的我，分别打开了火狐浏览器和 Chrome 浏览器，没办法，谁让咱最不缺的就是浏览器呢。

看 twitter 的时候，突然发现，原来设计师的灵感可能真是这么来的。

作为一名前端开发，这时候我突然想到，之前好像有人用CSS实现过 Chrome 浏览器的logo，这个看起来也能实现。

说干就干，我打开了前端切图崽熟悉的 Photoshop，哦不，打开尘封已久的 PPT，谁让我用他最顺手呢。

于是我设置好网格参考线等辅助线，大致知道了几个圆环的尺寸。不得不佩服 PPT的强大，我用两种方式处理了下照片 ，这样看起来比较好理清楚大致的结构。

几个要点

• 整体结构分析
• 各个圆（半圆、圆环）的大小
• 不同角度圆环的层级问题
• 背景色的渐变问题
• 可能用到的CSS属性（圆角、渐变、旋转等）

代码

只是一时兴起想实现下，并没有像素级还原 logo。

HTML 部分代码如下。类名是按照书写顺序来的

html, body {
  width: 200px;
  height: 200px;
  background-color: #fff;
  overflow: hidden;
  margin: 0;
  padding: 0;
}

.circle {
  width: 200px;
  height: 200px;
  background: linear-gradient(#0583cd, #0479d8);
  border-radius: 50%;
  position: relative;
  z-index: 1;
  outline: 1px solid #fff;
  overflow: hidden;
}

.center {
  width: 50px;
  height: 50px;
  background-color: #fff;
  border-radius: 50%;
  z-index: 100;
  position: absolute;
  bottom: 80px;
  left: 80px;
}

.circle1 {
  width: 120px;
  height: 125px;
  background: linear-gradient(30deg, #124b92, #0f539e);
  border-radius: 0 0 130px 125px;
  position: absolute;
  bottom: 3px;
  right: 14px;
  z-index: 20;
  transform: rotateZ(30deg);
}

.circle2 {
  width: 150px;
  height: 150px;
  border-radius: 150px 150px 0 0;
  position: absolute;
  bottom: 30px;
  left: 0px;
  z-index: 18
}

.circle_white {
  width: 130px;
  height: 120px;
  background-color: #fff;
  position: absolute;
  right: -10px;
  bottom: 40px;
  border-radius: 50%;
  z-index: 21;
}

.circle4 {
  width: 200px;
  height: 100px;
  background: linear-gradient(90deg, #32c1e3, #58de6f);
  border-radius: 150px 150px 0 0;
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: 40
}

.circle5 {
  width: 130px;
  height: 60px;
  background-color: #057ed3;
  position: absolute;
  left: 0px;
  bottom: 100px;
  border-radius: 60px 60px 0 0;
  z-index: 41;
}

.circle_add {
  background: linear-gradient(90deg, #4fd78b, #52e068);
  width: 80px;
  height: 49px;
  position: absolute;
  right: 0px;
  top: 86px;
  z-index: 41;
  border-radius: 10px 30px 300px 144px;
  transform: rotate(361deg);
}

注意：由于时间有限，渐变色不是太准，位置也是粗略估计的。只是近似的 Edge logo 实现，和实际的还有出入，渐变、大小都需要改进，代码写得也不是很优雅。有兴趣的小伙伴可以试试哈。