2014-11-02-css 中的度量.md

layout	date	title	tags
post	2014-11-02 21:17:10 +0800	css中的单位	css

angle

angle 者，角也。 积极的角度代表(right angles)，负角度代表(left angles)。

	background:-moz-linear-gradient(10deg,red,green,yellow);

角度为水平方向逆时针向上旋转10°

当指定的角度，请记住，它是一个由水平线与渐变线产生的的角度，逆时针方向。因此，使用0deg将产生一个左到右横向梯度，而90度将创建一个从底部到顶部的垂直渐变。

webkit-gradient

webkit核心浏览器下的的基本语法如下：
-webkit-gradient(type, start_point, end_point, / stop...) 
-webkit-gradient(type, inner_center, inner_radius, outer_center, outer_radius, / stop...)


参数
参数类型	简要说明
type	渐变的类型，可以是线性渐变(linear)或是径向渐变(radial)
start_point	渐变图像中渐变的起始点
end_point	渐变图像中渐变的结束点
stop	color-stop()方法，指定渐变进程中特定的颜色
inner_center	内部中心点，径向渐变起始圆环
inner_radius	内部半径，径向渐变起始圆
outer_center	外部渐变结束圆的中心点
outer_radius	外部渐变结束圆的半径

关于参数的具体说明

1. start_point 和 end_point
2. 划一条渐变线，会有起始点和结束点，这个起始点和结束点就对应这里的start_point和end_point参数

start_point(x1,x2)，end_point(x2,y2)，这里的 x,y 对应左上角为起点的坐标， 此处的x,y参数表示与CSS中的background-position是一致的，可以使像素值，或是百分比值或是left,top,right,bottom。

当x1等于x2，y1不等于y2，实现垂直渐变，调整y1，y2的值可以调整渐变半径大小； 当y1等于y2，x1不等于x2，实现水平渐变，调整x1，x2的值可以调整渐变半径大小； 当y1不等于y2，x1不等于x2，实现角度渐变，当x1,x2,y1,y2取值为极值的时候接近垂直渐变或水平渐变； 当x1等于x2，y1等于y2，实现没有渐变，取from色，即 from(颜色值) ；