渐变色的写法

170 阅读2分钟

浏览器兼容前缀: -ms- ie浏览器 -moz- 火狐浏览器 -webkit- webkit内核的浏览器 -o- 欧朋浏览器

css3渐变: 由一个颜色到另一个颜色之间的平滑过渡,至少两个颜色
	渐变用的属性为: background:;  background-image:;

	线性渐变:由一侧到另一侧的渐变 
		linear-gradient(方位,颜色1 起始位,颜色2 结束位)
			  -webkit-linear-gradient()
			方位: left right   
				  to left  去左边
				  to left top 去左上角
				  top bottom 
				  px  %

			颜色: 十六进制
				  颜色单词
				  rgb()  rgba()

			起始位,结束位: px %
	
			重复渐变: repeating-linear-gradient()

	径向渐变: 由中心向四周的渐变
		radial-gradient(方位,形状,大小,颜色1 起始位,颜色2 结束位)
			方位: px % 
			形状: 
					circle 正圆
					ellipse 椭圆
			大小: 
				closest-side:最近边; 
				farthest-side:最远边; 
				closest-corner:最近角;
				farthest-corner:最远角。
			重复径向渐变:
				repeating-radial-gradient()

过渡: 由一种状态到另一种状态的平滑现象
	transition:过渡属性 过渡时间 延迟时间 过渡动画类型;
		transition-property:过渡属性;
		transition-duration:过渡时间;
		transition-delay:延迟时间;
		transition-timing-function:过渡动画类型;
			linear 匀速运动
			ease 慢慢减速
			ease-in 加速运动
			ease-out 减速运动
			ease-in-out 先加速,后减速运动
			贝塞尔曲线

变换: transform:功能函数;
	功能函数:
		位移:
			translateX()
			translateY()
			translate(x)
			translate(x,y)
				可以为负数

		缩放:
			scaleX()
			scaleY()
			scale(xy)
			scale(x,y)
				可以为负数,只表示是方向
				1 默认大小,不变
				0-1 缩小
				绝对值比1大,放大

		旋转:
			rotateX()
			rotateY()
			rotateZ()
			rotate(z)
				可以为负数

			问题: 先旋转,后位置    和   先位移,后旋转  效果一样吗?
				不一样,理由是: 先旋转,改变了位移的方向

		倾斜: 
			skewX()
			skewY()
			skew(x)
			skew(x,y)
				可以为负数

		变形原点:
			transform-origin:水平  垂直;
				left center right
				top center bottom
				px %