一、放射性渐变原理
别人都用ps解释，我却在渐变上独喜欢flash的渐变变形工具。
别人都说径向渐变，flash里面显示的是放射性渐变，我就沿用了放射性渐变的说法。你看出来啦，我曾经是flash的迷妹！
e84d7f84b44ccb04a4feefd2a9667d64.gif
放射性渐变的核心就是：从中心点出发，辐射到边界处。
设置了四个色块，如图：
429079e8282c5076af4170153c1af3d0.png
用渐变变形工具可以查看
cd5a69fb9311cda5db01c0338b24c840.png
默认第一个色块从中心点出发，沿着半径分布色块，直到边界处。
所以，我们可以理解这里的渐变线是半径。
可以通过改变中心点的位置，边界的大小，半径的长短，三角形的移动实现非对称的渐变等效果。
6522b7dc00c47d236409249b908e6d47.png
原谅我没有来动画版本的，自己用flash试试呗！
其实来个椭圆一样妥妥的。
0ccef5ab67e2b3e35d7640cfab2ab533.png
明白了这个基本的原理后，再看MDN上的这篇文章，是不是感觉很好懂了。
至少这幅图好懂了↓
aab88560ed7f1007df0e78972991fc2a.png
半径就是虚拟渐变射线(virtual gradient ray)，中心点就是色块的起点(0%)，ending shape就是渐变的边界形状。ending shape只能是正圆(circle)或者椭圆(ellipse)。
二、放射性渐变的语法结构// Definition of the ending shape
radial-gradient( circle, … )/* Synonym of radial-gradient( circle farthest-corner, … ) */
radial-gradient( ellipse, … ) /* Synonym of radial-gradient( ellipse farthest-corner, … ) */
radial-gradient( , … ) /* It draws a circle */
radial-gradient( circle radius, … ) /* A centered circle of the given length. It can't be a percentage */
radial-gradient( ellipse x-axis y-axis, … ) /* The two semi-major axes are given, horizontal, then vertical */
// Definition of the position of the shape
radial-gradient ( … at , … )
// Definition of the color stops
radial-gradient ( …, , … )
radial-gradient ( …, , )
官方的标准语法HTMD复杂呀。
我们只能一点点攻克了。
先了解几个基本概念：
：指的是中心点的位置，这个定位和background-position的定位是一样的，比如“50px 40px”，“30% 44px”，“left center”等值，一个代表x坐标，一个代表y坐标。如果缺省，代表的是正中间(center)。它的取值也是这几种：
：用长度值指定径向渐变圆心的横坐标或纵坐标。可以为负值。
：用百分比指定径向渐变圆心的横坐标或纵坐标。可以为负值。
left：设置左边为径向渐变圆心的横坐标值。
center：设置中间为径向渐变圆心的横坐标值或纵坐标。
right：设置右边为径向渐变圆心的横坐标值。
top：设置顶部为径向渐变圆心的纵标值。
bottom：设置底部为径向渐变圆心的纵标值。
：只能为正圆或者椭圆，正圆表示半径是一样的，椭圆则有x轴、y轴两个半径。默认的值是椭圆(ellipse)。
：沿着渐变线的色彩的值和位置的值。位置的值可以是百分比或者具体的像素，和线性渐变的写法是一样的。比如“#f00 0%”，“red 25%”，“rgba(255,255,255,0.5) 200px”等。
：表示ending shape放射性渐变结束的形状的大小。
常用的有如下几个值：
closest-side：指定径向渐变的半径长度为从圆心到离圆心最近的边；
closest-corner：指定径向渐变的半径长度为从圆心到离圆心最近的角；
farthest-side：指定径向渐变的半径长度为从圆心到离圆心最远的边；
farthest-corner：指定径向渐变的半径长度为从圆心到离圆心最远的角，这个是默认值；
制作圆形：要使用CSS来制作一个圆形，我们需要一个div，被给它设置一个ID
<div id="circle"></div>
圆形在设置CSS时要设置宽度和高度相等，然后设置border-radius属性为宽度或高度的一半即可：
#circle {
width: 120px
height: 120px
background: #7fee1d
-moz-border-radius: 60px
-webkit-border-radius: 60px
border-radius: 60px
}
2
制作椭圆形：
椭圆形是正圆形的一个变体，同样使用一个带ID的div来制作
<div id="oval"></div>
设置椭圆形的CSS时，高度要设置为宽度的一半，border-radius属性也要做相应的改变：
#oval {
width: 200px
height: 100px
background: #e9337c
-webkit-border-radius: 100px / 50px
-moz-border-radius: 100px / 50px
border-radius: 100px / 50px
}
3
制作三角形：
要创建一个CSS三角形，需要使用border，通过设置不同边的透明效果，我们可以制作出三角形的现状。另外，在制作三角形时，宽度和高度要设置为0。
<div id="triangle"></div>
#triangle {
width: 0
height: 0
border-bottom: 140px solid #fcf921
border-left: 70px solid transparent
border-right: 70px solid transparent
}
4
制作倒三角形：
与正三角形不同的是，倒三角形要设置的是border-top、border-left和border-right三条边的属性：
#triangle {
width: 0
height: 0
border-top: 140px solid #20a3bf
border-left: 70px solid transparent
border-right: 70px solid transparent
}
5
制作左三角形：
左三角形操作的是border-top、border-left和border-right三条边的属性，其中上边和下边要设置透明属性。
#triangle_left {
width: 0
height: 0
border-top: 70px solid transparent
border-right: 140px solid #6bbf20
border-bottom: 70px solid transparent
}
制作菱形
制作菱形的方法有很多种。这里使用的是transform属性和rotate相结合，使两个正反三角形上下显示。
#diamond {
width: 120px
height: 120px
background: #1eff00
/* Rotate */
-webkit-transform: rotate(-45deg)
-moz-transform: rotate(-45deg)
-ms-transform: rotate(-45deg)
-o-transform: rotate(-45deg)
transform: rotate(-45deg)
/* Rotate Origin */
-webkit-transform-origin: 0 100%
-moz-transform-origin: 0 100%
-ms-transform-origin: 0 100%
-o-transform-origin: 0 100%
transform-origin: 0 100%
margin: 60px 0 10px 310px
}
制作梯形：
梯形是三角形的一个变体，设置CSS梯形时，左右两条边设置为相等，并且给它设置一个宽度。
#trapezium {
height: 0
width: 120px
border-bottom: 120px solid #ec3504
border-left: 60px solid transparent
border-right: 60px solid transparent
}
制作平行四边形：
平行四边形的制作方式是使用transform属性使长方形倾斜一个角度。
#parallelogram {
width: 160px
height: 100px
background: #8734f7
-webkit-transform: skew(30deg)
-moz-transform: skew(30deg)
-o-transform: skew(30deg)
transform: skew(30deg)
}
星形：
星形的HTML结构同样使用一个带ID的空div。星形的实现方式比较复杂，主要是使用transform属性来旋转不同的边。仔细体会下面的代码。
#star {
width: 0
height: 0
margin: 50px 0
color: #fc2e5a
position: relative
display: block
border-right: 100px solid transparent
border-bottom: 70px solid #fc2e5a
border-left: 100px solid transparent
-moz-transform: rotate(35deg)
-webkit-transform: rotate(35deg)
-ms-transform: rotate(35deg)
-o-transform: rotate(35deg)
}
#star:before {
height: 0
width: 0
position: absolute
display: block
top: -45px
left: -65px
border-bottom: 80px solid #fc2e5a
border-left: 30px solid transparent
border-right: 30px solid transparent
content: ''
-webkit-transform: rotate(-35deg)
-moz-transform: rotate(-35deg)
-ms-transform: rotate(-35deg)
-o-transform: rotate(-35deg)
}
#star:after {
content: ''
width: 0
height: 0
position: absolute
display: block
top: 3px
left: -105px
color: #fc2e5a
border-right: 100px solid transparent
border-bottom: 70px solid #fc2e5a
border-left: 100px solid transparent
-webkit-transform: rotate(-70deg)
-moz-transform: rotate(-70deg)
-ms-transform: rotate(-70deg)
-o-transform: rotate(-70deg)
}
六角星形：
和五角星的制作方法不同，六角星形状的制作方法是操纵border属性来制作两半图形，然后合并它们。
#star_six_points {
width: 0
height: 0
display: block
position: absolute
border-left: 50px solid transparent
border-right: 50px solid transparent
border-bottom: 100px solid #de34f7
margin: 10px auto
}
#star_six_points:after {
content: ""
width: 0
height: 0
position: absolute
border-left: 50px solid transparent
border-right: 50px solid transparent
border-top: 100px solid #de34f7
margin: 30px 0 0 -50px
}
六边形：
六边形的制作方法可以有很多种，可以像五边形一样，先制作一个长方形，然后在它的上面和下面各放置一个三角形。
#hexagon {
width: 100px
height: 55px
background: #fc5e5e
position: relative
margin: 10px auto
}
#hexagon:before {
content: ""
width: 0
height: 0
position: absolute
top: -25px
left: 0
border-left: 50px solid transparent
border-right: 50px solid transparent
border-bottom: 25px solid #fc5e5e
}
#hexagon:after {
content: ""
width: 0
height: 0
position: absolute
bottom: -25px
left: 0
border-left: 50px solid transparent
border-right: 50px solid transparent
border-top: 25px solid #fc5e5e
}
心形：
心形的制作是非常复杂的，可以使用伪元素来制作，分别将伪元素旋转不同的角度，并修改transform-origin属性来元素的旋转中心点。
#heart {
position: relative
}
#heart:before,#heart:after {
content: ""
width: 70px
height: 115px
position: absolute
background: red
left: 70px
top: 0
-webkit-border-radius: 50px 50px 0 0
-moz-border-radius: 50px 50px 0 0
border-radius: 50px 50px 0 0
-webkit-transform: rotate(-45deg)
-moz-transform: rotate(-45deg)
-ms-transform: rotate(-45deg)
-o-transform: rotate(-45deg)
transform: rotate(-45deg)
-webkit-transform-origin: 0 100%
-moz-transform-origin: 0 100%
-ms-transform-origin: 0 100%
-o-transform-origin: 0 100%
transform-origin: 0 100%
}
#heart:after {
left: 0
-webkit-transform: rotate(45deg)
-moz-transform: rotate(45deg)
-ms-transform: rotate(45deg)
-o-transform: rotate(45deg)
transform: rotate(45deg)
-webkit-transform-origin: 100% 100%
-moz-transform-origin: 100% 100%
-ms-transform-origin: 100% 100%
-o-transform-origin: 100% 100%
transform-origin: 100% 100%
}
蛋形：
蛋形时椭圆形的一个变体，它的高度要比宽度稍大，并且设置正确的border-radius属性即可以制作出一个蛋形。
#egg {
width: 136px
height: 190px
background: #ffc000
display: block
-webkit-border-radius: 63px 63px 63px 63px / 108px 108px 72px 72px
border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%
}
无穷符号：
无穷符号可以通过border属性和设置伪元素的角度来实现。
#infinity {
width: 220px
height: 100px
position: relative
}
#infinity:before,#infinity:after {
content: ""
width: 60px
height: 60px
position: absolute
top: 0
left: 0
border: 20px solid #06c999
-moz-border-radius: 50px 50px 0
border-radius: 50px 50px 0 50px
-webkit-transform: rotate(-45deg)
-moz-transform: rotate(-45deg)
-ms-transform: rotate(-45deg)
-o-transform: rotate(-45deg)
transform: rotate(-45deg)
}
#infinity:after {
left: auto
right: 0
-moz-border-radius: 50px 50px 50px 0
border-radius: 50px 50px 50px 0
-webkit-transform: rotate(45deg)
-moz-transform: rotate(45deg)
-ms-transform: rotate(45deg)
-o-transform: rotate(45deg)
transform: rotate(45deg)
}
消息提示框：
消息提示框可以先制作一个圆角矩形，然后在需要的地方放置一个三角形。
#comment_bubble {
width: 140px
height: 100px
background: #088cb7
position: relative
-moz-border-radius: 12px
-webkit-border-radius: 12px
border-radius: 12px
}
#comment_bubble:before {
content: ""
width: 0
height: 0
right: 100%
top: 38px
position: absolute
border-top: 13px solid transparent
border-right: 26px solid #088cb7
border-bottom: 13px solid transparent
}
步骤阅读
