2、这时需要去除浏览器中一些特有的样式。
3、给这个样式一个宽高，并添加一个背景。
4、最后给样式添加border-radius属性，其值为宽或高的一半。
5、最后运行程序，这样就会在界面中看到一个圆形。
缓过来了，开讲放射性渐变吧。一、放射性渐变原理
别人都用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：指定径向渐变的半径长度为从圆心到离圆心最远的角，这个是默认值；
其实很简单HTML代码：
[html] view plain copy
<div class="sanjiao"></div>
CSS代码：
[css] view plain copy
.sanjiao {
width: 0
height: 0
overflow: hidden
border-width: 10px
border-color: transparent transparent #000 transparent
border-style: dotted dotted solid dotted
}
其原理就是给元素加一个比较大的边框，箭头的方向就是border-color四个参数的方向（上、右、下、左），箭头指向那一边就给哪一边设置颜色，其他边透明。
这样就很方便的做了一个小的三角形图标。
其中需要注意的地方是：由于IE6不支持overflow属性，会将其他边框也显示出来，所以将不需要显示的边框的border-style属性设置为dotted就可以完美兼容IE6啦！
