CSS3 新增的UI方案

1 文本新增样式

1.1 opacity 透明度

指定透明度的属性是opacity,属性值从 0.0 到 1.0。值越小，越透明。

结合其他使用，更高性能，且不能继承。

1.2 新增颜色模式RGB

语法：

R：红色值。正整数 | 百分数

G：绿色值。正整数 | 百分数

B：蓝色值。正整数| 百分数

A：透明度。取值0~1之间

取值：

< length > ：Hue(色调)。 0(或360)表示红色，120表示绿色，240表示蓝色，当然可取其他数值来确定其它颜色；

< percentage > ：Saturation(饱和度)。 取值为0%到100%之间的值；

< percentage > ：Lightness(亮度)。 取值为0%到100%之间的值；

< opacity > ：alpha(透明度)。 取值在0到1之间；

说明：

（1）RGB色彩模式（也翻译为“红绿蓝”，比较少用）是工业界的一种颜色标准，是通过对红®、绿(G)、蓝(B)三个颜色通道的变化以及它们相互之间的叠加来得到各式各样的颜色的，RGB即是代表红、绿、蓝三个通道的颜色，这个标准几乎包括了人类视力所能感知的所有颜色，是目前运用最广的颜色系统之一。

（2）RGBA在RGB的基础上多了控制alpha透明度的参数。以上R、G、B三个参数，正整数值的取值范围为：0 - 255。百分数值的取值范围为：0.0% - 100.0%。超出范围的数值将被截至其最接近的取值极限。并非所有浏览器都支持使用百分数值。A参数，取值在0~1之间，不可为负值。

1.3 文字阴影

text-shadow：
用来为文字添加阴影，而且可以叠加很多层，阴影之间用逗号隔开。（多个阴影时，第一个阴影在最上面）。

默认值为：none（不可继承）

值：

		color：（颜色）
		offset-x： 、 offset-y：（偏移）
		blur-radius：（模糊程度，值越大，模糊半径越大）

1.4 文字描边

只有webkit内核才支持，-webkit-text-stroke（准确来说不是不能算是CSS3的东西）。

1.5 文字排版

（1）direction：控制文字的方向（从左往右、从右往左）
一定要配合unicode-bidi：bidi-override来使用（例如： 程序员 员序程）。

（2）text-overflow：确定如何向用户发出未显示的溢出内容信号。

		clip：超出部分被直接剪切；
		ellipsis：显示一个省略号（’…’）

注意：通常与white-space：nowrap；（不换行）、overflow：hidden一同使用。

2. 盒模型新增样式

2.1 盒模型阴影

box-shadow： 以逗号分隔列表来描述一个或多个阴影，几乎可以用到任何元素上。

默认值：none 不可继承

值：

	insert：默认阴影在外边框，使用insert后，阴影在内边框。
	blur-radius：值越大模糊面积就越大，阴影就越大越淡。
    spread-radius：取正值，阴影扩大，取负值，阴影收缩，默认为0，阴影与元素一样大。
	其他与文本阴影大致相同。（color、offset-x、offset-y）

2.2 倒影

-webkit-box-reflect：设置元素倒影（严格来说也不是CSS3的东西）。

默认值：none 不可继承。

值：（必须是123的顺序）

	倒影的方向：第一个值，above、below、right、left；
	倒影的距离：第二个值，长度单位；
	渐变：      第三个值。

2.3 resize

允许控制一个元素可调整大小。

注意：一定要配合“overflow：auto”使用

默认值：none 不可继承

值：

	none：元素不能被用户缩放；
	both：允许用户在水平、垂直方向上调整元素的大小；
	horizontal：允许用户在水平方向上调整元素的大小；
	vertical：允许用户在垂直方向上调整元素的大小。

2.4 box-sizing

更改用于计算元素高度和宽度的默认的CSS盒模型。可以使用此属性来模拟不正确的支持CSS盒模型的浏览器的行/列。

默认值：content-box 不可继承

值：

	content-box：标准盒子模型。内容的高度和宽度都不包含内容的边框和内边距。
			width= 内容的高度
      	 	height =内容的宽度
	border-box：内容的高度和宽度包含内容的边框和内边距，但不包括外边距。
			width = border + padding + 内容的width
			height= border + padding + 内容的height

3. 新增UI样式

3.1 圆角

传统的圆角生成方式，必须使用多张图片作为背景图片，CSS3的圆角有以下优点：减少维护的工作量、提高网页性能、增加视觉可靠性。

默认值 0 不可继承

border-radius：

值：

	固定的px值定义圆形半径或椭圆的半长轴、半短轴。不能用负值。
	
	使用百分比定义圆形半径或椭圆的半长轴、半短轴。不能用负值。水平半轴相当于盒模型的宽度，垂直半轴相当于盒模型的高度。

	a px  b px （a代表正方向，即“左上右下”；b代表反方向，即“左下右上”）
	a px  b px  c px（a代表“左上”，b代表“左下右上”，c代表“右下”）

注意：在旧版本的IOS（IOS5之前）和Android中（webkit532之前）不支持使用百分比。所以在移动端最好使用px，不用百分比。

3.2 边框图片

（1）border-image：
CSS属性允许在元素的边框上绘制图像，这使得绘制复杂的外观图像更加简单，使用border-image时将会替换调border-style属性设置的边框样式。

（2）border-image-source：
定义使用一张图片来代替边框样式。如果值为none，则使用border-style的样式。默认值 none 不可继承。

（3）border-image-slice：
此属性会通过规范将border-image-source的图片明确的分割为9个区域，四边及中心区域，并且可以制定偏移量。值的百分比参照于image本身。

（4）border-image-repeat：
定义图片如何填充边框。或为单个值，设置所有的边框；或为两个值，分别设置水平与垂直的边框。

默认值：stretch 不可继承

值：
stretch：拉伸
repeat、round：平铺

（5）border-image-width：
定义边框图像的宽度。如果有border宽度则只改变图像大小，边框宽度不会改变。
默认值：1 不可继承

（6）border-image-outset：
定义边框图像可超出边框盒的大小。

默认值：0 不可继承

值：
正值：可超出边框盒的大小。

3.3 背景

CSS2：

（1）background-image：用于设置一个或多个背景图像。设置多个背景图像时，以z轴方向进行堆叠，且先指定的图像会在后指定的图像上绘制。

（2）background-position：指定背景位置的初始位置。
百分比：参照 图片为背景图片定位区域的大小减去背景图片的大小：
百分比第一个值：元素在水平方向上的位移；
百分比第二个值：元素在垂直方向上的位移。

（3）background-attachment：决定背景是在视口中固定还是随它包含的区块滚动的。

默认值：scroll 不可继承

值：

fixed：此关键字表示窗背景关于窗口固定。即使元素拥有滚动机制，背景也不会随着内容滚动。
scroll：此关键字表示背景相对于元素固定，而不是随着它的内容滚动。

注意： 最好不要使用

默认情况下，背景图片从padding开始绘制，从border开始剪裁。建议使用背景图片时不要写简写属性。

CSS3：

（1）background-origin：设置背景渲染的起始位置。
值：
border- box：
padding- box：
content-box：

（2）background-clip：设置背景剪裁的起始位置。
-Webkit- background-clip：text（按照文字内容剪切背景图片）

（3）background- size：设置背景图片大小。
默认值：auto auto 不可继承
值：
百分比：指定背景图片相对背景区的百分比，背景区由Background-origin确定，默认为盒模型的内容与内边距。
auto：以背景图片的比例缩放背景图片。

注意：单个值时，这个值指定图片的宽度，图片高度设置为隐式的auto；两个值时，第一个设置图片高度，第二个指定高度。

3.4 渐变（渐变是图片，不是颜色）

（1）线性渐变
为了设置线性渐变，你需要设置一个起始点和一个方向（指定一个角度），你还要定义终止色，并且至少定义两种。

	默认从上至下发生渐变：linear-gradient（red，blue）。
	改变渐变方向：linear-gradient（to 结束的方向，red，blue）。
	使用角度：linear-gradient（角度，red，blue）。
	重复渐变：repeating- linear-gradient：（60deg，red 0，blue 30% ）。

（2）径行渐变
radial-gradient（）函数创建一个，用来展示由原点（渐变中心）辐射开的颜色渐变。

	默认均匀分布：radial-gradient（red，blue）
	不均匀分布：radial-gradient（red 50%，blue 70%）
	改变渐变的形状：（默认为椭圆，ellipse）radial-gradient（circle，red，blue）
	渐变形状的大小：radial-gradient（closest-side  circle，red，blue），closest-side（最近边）、closest-corner（最近角）、farthest-side（最远边）、farthest-corner（最远角）
	改变圆心：radial-gradient（closest-side  circle at 10px 10px，red，blue）