代码：

html

    <div id="wrapper">      <div class="logo chrome">        <div class="part-1"></div>        <div class="part-2"></div>        <div class="part-3"></div>        <div class="circle"></div>        <div class="center"></div>      </div>      <div class="logo chrome canary">        <div class="part-1"></div>        <div class="part-2"></div>        <div class="part-3"></div>        <div class="circle"></div>        <div class="center"></div>      </div>      <div class="logo chrome chromium">        <div class="part-1"></div>        <div class="part-2"></div>        <div class="part-3"></div>        <div class="circle"></div>        <div class="center"></div>      </div>    </div>

* {  -webkit-box-sizing: border-box;  -moz-box-sizing: border-box;  box-sizing: border-box;  margin: 0;  padding: 0;}#wrapper {  display: block;  margin: 0 auto;  max-width: 700px;}#wrapper > .logo {  display: inline-block;  margin: 20px 10px;}.logo.chrome {  -webkit-border-radius: 50%;  -moz-border-radius: 50%;  -ms-border-radius: 50%;  -o-border-radius: 50%;  border-radius: 50%;  position: relative;  overflow: hidden;  height: 210px;  width: 210px;  z-index: 1;}.logo.chrome .center {  -webkit-border-radius: 50%;  -moz-border-radius: 50%;  -ms-border-radius: 50%;  -o-border-radius: 50%;  border-radius: 50%;  background: #0d6cac;  background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #91c1e7), color-stop(100%, #0d6cac));  background: -webkit-linear-gradient(top center, #91c1e7, #0d6cac);  background: -moz-linear-gradient(top center, #91c1e7, #0d6cac);  background: -o-linear-gradient(top center, #91c1e7, #0d6cac);  background: linear-gradient(top center, #91c1e7, #0d6cac);  position: absolute;  top: 50%;  left: 50%;  height: 80px;  width: 80px;  margin-top: -41px;  margin-left: -40px;  border-bottom: solid 1px #125e90;  z-index: 10;}.logo.chrome .circle {  -webkit-border-radius: 50%;  -moz-border-radius: 50%;  -ms-border-radius: 50%;  -o-border-radius: 50%;  border-radius: 50%;  position: absolute;  background: white;  top: 50%;  left: 50%;  height: 94px;  width: 94px;  margin-top: -48px;  margin-left: -47px;  z-index: 5;}.logo.chrome .part-1 {  background: #e93c35;  position: absolute;  top: 0;  left: 34px;  width: 200px;  height: 58px;}.logo.chrome .part-1:after {  -webkit-transform: rotate(60deg);  -moz-transform: rotate(60deg);  -ms-transform: rotate(60deg);  -o-transform: rotate(60deg);  transform: rotate(60deg);  content: " ";  background: #e93c35;  position: absolute;  top: 0;  left: -91px;  width: 200px;  height: 58px;}.logo.chrome .part-2 {  -webkit-transform: rotate(120deg);  -moz-transform: rotate(120deg);  -ms-transform: rotate(120deg);  -o-transform: rotate(120deg);  transform: rotate(120deg);  background: #fdd901;  position: absolute;  top: 131px;  left: 56px;  width: 200px;  height: 65px;}.logo.chrome .part-2:after {  -webkit-transform: rotate(60deg);  -moz-transform: rotate(60deg);  -ms-transform: rotate(60deg);  -o-transform: rotate(60deg);  transform: rotate(60deg);  content: " ";  background: #fdd901;  position: absolute;  top: 0;  left: -91px;  width: 200px;  height: 58px;}.logo.chrome .part-3 {  -webkit-transform: rotate(-120deg);  -moz-transform: rotate(-120deg);  -ms-transform: rotate(-120deg);  -o-transform: rotate(-120deg);  transform: rotate(-120deg);  background: #5bc15b;  position: absolute;  top: 88px;  left: -74px;  width: 200px;  height: 65px;}.logo.chrome .part-3:after {  -webkit-transform: rotate(60deg);  -moz-transform: rotate(60deg);  -ms-transform: rotate(60deg);  -o-transform: rotate(60deg);  transform: rotate(60deg);  content: " ";  background: #5bc15b;  position: absolute;  top: 0;  left: -91px;  width: 200px;  height: 58px;}.logo.chrome.canary .center {  background: #b88000;  background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #efc948), color-stop(100%, #b88000));  background: -webkit-linear-gradient(top center, #efc948, #b88000);  background: -moz-linear-gradient(top center, #efc948, #b88000);  background: -o-linear-gradient(top center, #efc948, #b88000);  background: linear-gradient(top center, #efc948, #b88000);  border-bottom-color: #e8b600;}.logo.chrome.canary .part-1, .logo.chrome.canary .part-1:after {  background: #cb8f00;}.logo.chrome.canary .part-2, .logo.chrome.canary .part-2:after {  background: #ecc21b;}.logo.chrome.canary .part-3, .logo.chrome.canary .part-3:after {  background: #e0a600;}.logo.chrome.chromium .center {  background: #3878bb;  background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #9cbee4), color-stop(100%, #3878bb));  background: -webkit-linear-gradient(top center, #9cbee4, #3878bb);  background: -moz-linear-gradient(top center, #9cbee4, #3878bb);  background: -o-linear-gradient(top center, #9cbee4, #3878bb);  background: linear-gradient(top center, #9cbee4, #3878bb);  border-bottom-color: #3878bb;}.logo.chrome.chromium .part-1, .logo.chrome.chromium .part-1:after {  background: #4071a0;}.logo.chrome.chromium .part-2, .logo.chrome.chromium .part-2:after {  background: #d0e2f1;}.logo.chrome.chromium .part-3, .logo.chrome.chromium .part-3:after {  background: #89b7e1;}

在线查看:

在线教程：　

CSS3 渐变（Gradients）

CSS3 渐变（gradients）可以让你在两个或多个指定的颜色之间显示平稳的过渡。

以前，你必须使用图像来实现这些效果。但是，通过使用 CSS3 渐变（gradients），你可以减少下载的时间和宽带的使用。此外，渐变效果的元素在放大时看起来效果更好，因为渐变（gradient）是由浏览器生成的。

CSS3 定义了两种类型的渐变（gradients）：

线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向径向渐变（Radial Gradients）- 由它们的中心定义

线性渐变相关属性：background-image。

浏览器支持

表中的数字指定了完全支持该属性的第一个浏览器版本。

CSS3 线性渐变

为了创建一个线性渐变，你必须至少定义两种颜色节点。颜色节点即你想要呈现平稳过渡的颜色。同时，你也可以设置一个起点和一个方向（或一个角度）。

线性渐变的实例：

语法

background-image: linear-gradient(direction, color-stop1, color-stop2, ...);

线性渐变 - 从上到下（默认情况下）

下面的实例演示了从顶部开始的线性渐变。起点是红色，慢慢过渡到蓝色：

线性渐变 - 从左到右

下面的实例演示了从左边开始的线性渐变。起点是红色，慢慢过渡到黄色：

线性渐变 - 对角

你可以通过指定水平和垂直的起始位置来制作一个对角渐变。

下面的实例演示了从左上角开始（到右下角）的线性渐变。起点是红色，慢慢过渡到黄色：

使用角度

如果你想要在渐变的方向上做更多的控制，你可以定义一个角度，而不用预定义方向（to bottom、to top、to right、to left、to bottom right，等等）。

语法

background-image: linear-gradient(angle, color-stop1, color-stop2);

角度是指水平线和渐变线之间的角度，逆时针方向计算。换句话说，0deg 将创建一个从下到上的渐变，90deg 将创建一个从左到右的渐变。

但是，请注意很多浏览器（Chrome、Safari、firefox等）的使用了旧的标准，即 0deg 将创建一个从左到右的渐变，90deg 将创建一个从下到上的渐变。换算公式 90 - x = y 其中 x 为标准角度，y为非标准角度。

下面的实例演示了如何在线性渐变上使用角度：

使用多个颜色节点

下面的实例演示了如何设置多个颜色节点：

下面的实例演示了如何创建一个带有彩虹颜色和文本的线性渐变：

使用透明度（transparent）

CSS3 渐变也支持透明度（transparent），可用于创建减弱变淡的效果。

为了添加透明度，我们使用 rgba() 函数来定义颜色节点。rgba() 函数中的最后一个参数可以是从 0 到 1 的值，它定义了颜色的透明度：0 表示完全透明，1 表示完全不透明。

下面的实例演示了从左边开始的线性渐变。起点是完全透明，慢慢过渡到完全不透明的红色：

实例

从左到右的线性渐变，带有透明度：

重复的线性渐变

repeating-linear-gradient() 函数用于重复线性渐变：