颜色和渐变

颜色和渐变

1. rbg、英文单词 、进制 rgba。
   不透明度:
   rgba
   opacity: 使用的时候会连字都变得透明
2. 颜色渐变 — 应用在元素的背景上
   渐变分为两种：线性渐变 和 径向渐变
   linear-gradient() 线性渐变

Tip：线性渐变的初始颜色变化默认是从上到下。

而且，渐变必须设置在background的身上。

background-image: linear-gradient

首先，线性渐变是支持多个颜色渐变的。

	background: linear-gradient(red,yellow,blue,pink);

设置渐变方向：

	background: -webkit-linear-gradient(bottom,red,pink);

如果在参数里直接设置方向，那么需要加浏览器前缀。

如果在方向的前面加上to，那么就不需要加浏览器前缀

background: linear-gradient(to left,red,pink);

	to left 、 to right 、 to top 、to bottom ,没有to center

当然，关于方向我们也可以组合来使用：

	to left top 或者top left bottom.....

我们除了设置具体的方向值，还可以通过 angle 来设置角度。

在代码中deg表示角度

		0deg表示从下向上

		如果角度为正，则为顺时针，如果角度为负，则为逆时针

渐变百分比

	background: linear-gradient(to left,red 10%,black 90%);

	方向：从右到左，

		表示从起始方向开始，从右向左的10%为纯红色，从10%到90%为红色向黑色的渐变色，剩下的

		为纯黑色

线性渐变在IE:

	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff',

	endColorstr='#ff0000',GradientType='1');   

GradientType = 0 方向是从上向下  1为从左向右

重复线性渐变

	一个渐变的过程已经完成，后续重复的进行这个过程。

	repeating-linear-gradient() ;

radial-gradient:径向渐变

radial-gradient:径向渐变

方向：

	left top right bottom ，前面要加webkit

	也可以设置具体的值：apx  bpx 

还可以设置圆的形状：

	正圆:circle

	椭圆:ellipse

圆角

border-radius:圆角

boder-top-left-radius: 左上

border-top-right-radius:右上

border-bottom-right-radius:

border-bottom-left-riadus:

border-radius：可以设置一个值到四个值。

	顺序：

		1个值：四个角

		2个值: 左上右下 右上左下

		三个值:  左上  右上左下  右下 

		四个值: 左上 右上  右下  左下

border-image 边框图片

目前IE11以上才支持。

border-image 是一个简写值，分别有以下属性值,

	border-image-source	图片地址

	border-image-slice   图片切片

	border-image-width  图片宽度

	border-image-outset  图片外凸

	border-image-repeat  图片重复

border-image-slice：图像切片

	值：number  | 百分比  {1,4}

	Tip：

		{1,4} 表示最少一个值，最多四个值

	指定边框图像顶部，右侧，底部，左侧内偏移量。没有具体的单位值，px em rem都不可以。

	只可以用数字或者百分比

border-image-width 图片宽度

	值：lenghth | number | 百分比 {1,4}

border-image-outset 图片外凸

border-image-repeat 图片重复

盒子阴影

box-shadow :

h-shadow v-shadow blur spread color inset;



h-shadow：水平阴影的位置 允许负值
v-shadow：垂直阴影的位置 允许负值
blur : 模糊值
spread 阴影的大小
color	颜色
inset