新的UI方案之文本新增样式
opacity
opacity属性指定了一个元素的透明度
默认值：1.0 不可继承
可选值：0-1
0表示完全透明，1表示完全不透明，0.5半透明
IE8及以下的浏览器不支持该样式，可以使用滤镜来代替
filter:alpha(opacity=值)
这里值需要一个0-100之间的值，0相当于完全透明，100完全不透明。
新增颜色模式rgba
text-shadow（文字阴影）
text-shadow: <color> <offset-x> <offset-y> <blur-radius>;
text-shadow: 颜色(可选) 水平偏移量(必选) 垂直偏移量(必选) 模糊半径(可选);
text-shadow用来为文字添加阴影，而且可以添加多层，阴影值之间用逗号隔开。
（多个阴影时，第一个阴影在最上边）
默认值：none 可继承
值:
<color>
可选。可以在偏移量之前或之后指定。
如果没有指定颜色，则使用UA（用户代理）选择的颜色。
<offset-x> <offset-y>
必选。这些长度值指定阴影相对文字的偏移量。<br>
<offset-x> 指定水平偏移量，若是负值则阴影位于文字左边。
<offset-y> 指定垂直偏移量，若是负值则阴影位于文字上面。
如果两者均为0，则阴影位于文字正后方(如果设置了<blur-radius> 则会产生模糊效果)。
<blur-radius>可选。这是 <length> 值。如果没有指定，则默认为0。
值越大，模糊半径越大，阴影也就越大越淡。
text-shadow应用
浮雕文字效果：
字体内容设置成白色，阴影设为黑色，即可。
// 应用
<h1>
吃得苦中苦,方为人上人！
</h1>
h1{
font-size: 30px;
color: white;
letter-spacing: 2px;
text-shadow:black 1px 1px 3px;
font-family: "楷体";
}
文字模糊效果：
设置文字阴影的模糊半径，加上过渡即可
text-shadow: rgba(0,0,0,0) 1px 1px 200px;
transition: 1s;
// 示例
<h1>乘帆破浪会有时，<br />直挂云帆济沧海。</h1>
h1{
position: relative;
left: 200px;
top: 100px;
font-size: 20px;
color: red;
}
h1:hover{
color: rgba(0,0,0,0);
text-shadow: rgba(0,0,0,0) 1px 1px 200px;
transition: 1s;
}
-webkit-text-stroke(文字描边)
-webkit-text-stroke:描边线条宽度 描边线条颜色;
只有webkit内核才支持：-webkit-text-stroke
（准确的来说不能算是css3的东西，但需要知道）
text-stroke:Webkit特有属性，文字描边
参数：1.描边线条宽度
2.描边线条颜色
text-shadow也可以实现文字描边:
color: white;
text-shadow: red 1px 1px 1px,red -1px -1px 1px;
direction(文字排版)
direction:控制文字的方向
一定要配合unicode-bidi:bidi-override;来使用
direction:ltr;
unicode-bidi:bidi-override;
text-overflow :
如何向用户发出未显示的溢出内容信号。
它可以被剪切，显示一个省略号（’…’）
值：
clip： 当内联内容溢出块容器时，将溢出部分裁切掉。
ellipsis： 当内联内容溢出块容器时，将溢出部分替换为（…）。
怎样实现溢出显示省略号
white-space=no-wrap
overflow=hidden
text-overflow=ellipsis
包裹区域必须不能让子元素撑开
// 溢出显示省略号示例
p{
width:50px;
border:1px solid #000;
font:14px/30px "宋体";
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
<p>乘风破浪会有时，直挂云帆济沧海</p>
新的UI方案之盒模型新增样式
box-shadow(盒模型阴影)
box-shadow: (inset) <offset-x> <offset-y> <blur-radius> <spread-radius>;
box-shadow: (阴影在边框内) 水平偏移量 垂直偏移量 模糊半径 扩散半径;
box-shadow
以逗号分割列表来描述一个或多个阴影效果，可以用到几乎任何元素上。
如果元素同时设置了 border-radius ，阴影也会有圆角效果。
多个阴影时和多个text shadows 规则相同(第一个阴影在最上面)。
默认值: none 不可继承
值：
inset
默认阴影在边框外。
**使用inset后，阴影在边框内。**<br><br>
<offset-x> <offset-y>
这是头两个 <length> 值，用来设置阴影偏移量。<br>
<offset-x> 设置水平偏移量，如果是负值则阴影位于元素左边。<br>
<offset-y> 设置垂直偏移量，如果是负值则阴影位于元素上面。
如果两者都是0，那么阴影位于元素后面。
这时如果设置了<blur-radius> 或<spread-radius> 则有模糊效果。<br><br>
<blur-radius>
这是第三个 <length> 值。值越大，模糊面积越大，阴影就越大越淡。
不能为负值。默认为0，此时阴影边缘锐利。<br><br>
<spread-radius>
这是第四个 <length> 值。取正值时，阴影扩大；取负值时，阴影.收缩。
默认为0，此时阴影与元素同样大。<br><br>
<color>
阴影颜色，如果没有指定，则由浏览器决定
-webkit-box-reflect(倒影)
-webkit-box-reflect: 倒影的方向(above, below, right, left) 倒影的距离(长度) 渐变;
-webkit-box-reflect 设置元素的倒影（准确的来说不能算是css3的东西，但需要大家知道）
默认值:none 不可继承
值：**（必须是123的顺序）**
倒影的方向:
第一个值，above, below, right, left<br>
倒影的距离:
第二个值，长度单位<br>
渐变:
第三个值
resize(用户可调整元素大小)
resize: none / both / horizontal / vertical;
overflow: auto;
// 一定要配合overflow：auto使用
默认值：none 不可继承
值：
none
元素不能被用户调整大小。
both
允许用户在水平和垂直方向上调整元素的大小。
horizontal
允许用户在水平方向上调整元素的大小。
vertical
允许用户在垂直方向上调整元素的大小。
box-sizing（怪异盒模型）
box-sizing: content-box(正常,默认值)/border-box(包括边框);
box-sizing 属性用于更改用于计算元素宽度和高度的默认的 CSS 盒子模型。
可以使用此属性来模拟不正确支持CSS盒子模型规范的浏览器的行为。
默认值：content-box 不可继承
值:
content-box
默认值，标准盒子模型。 width 与 height 只包括内容的宽和高，
不包括边框（border），内边距（padding），外边距（margin）。
**注意**: 内边距, 边框，外边距 都在这个盒子的外部。
比如. 如果 .box {width: 350px};而且 {border: 10px solid black;}
那么在浏览器中的渲染的实际宽度将是370px;
尺寸计算公式：
width = 内容的宽度，
height = 内容的高度。
宽度和高度都不包含内容的边框（border）和内边距（padding）。
border-box<br>
width 和 height 属性包括内容，内边距和边框，但不包括外边距。
这是当文档处于 Quirks模式 时Internet Explorer使用的盒模型。
这里的维度计算为：
width = border + padding + 内容的 width，
height = border + padding + 内容的 height。
新的UI方案之新增UI样式
border-radius（圆角）
border-radius
border-top-left-radius,
border-top-right-radius,
border-bottom-right-radius，
border-bottom-left-radius
传统的圆角生成方案，必须使用多张图片作为背景图案。
CSS3圆角的出现，使得我们再也不必浪费时间去制作这些图片了，而且还有其他多个优点：
减少维护的工作量。图片文件的生成、更新、编写网页代码，这些工作都不再需要了。
提高网页性能。由于不必再发出多余的HTTP请求，网页的载入速度将变快。
增加视觉可靠性。某些情况下（网络拥堵、服务器出错、网速过慢等等），
背景图片会下载失败，导致视觉效果不佳。CSS3就不会发生这种情况。
>border-radius
用来设置边框圆角。
**当使用一个半径时确定一个圆形；当使用两个半径时确定一个椭圆，
这个(椭)圆与边框的交集形成圆角效果。**
默认值 : 0 不可继承
值：
固定的px值定义圆形半径或椭圆的半长轴，半短轴。不能用负值。
使用百分数定义圆形半径或椭圆的半长轴，半短轴。
水平半轴*相对于*盒模型的宽度；垂直半轴*相对于*盒模型的高度。不能用负值。
border-radius这是一个简写属性，用来设置
border-top-left-radius,
border-top-right-radius,
border-bottom-right-radius ，
border-bottom-left-radius
半径的第一个语法取值可取1~4个值:
border-radius: radius
border-radius: （左上，右下）（右上、左下）
border-radius: （左上）（右上、左下）（右下）
border-radius: （左上）（右上）（右下）（左下）
半径的第二个语法取值也可取1~4个值
border-radius: (first radius values) / radius
border-radius: (first radius values) / top-left-and-bottom-right top-right-and-bottom-left
border-radius: (first radius values) / top-left top-right-and-bottom-left bottom-right
border-radius: (first radius values) / top-left top-right bottom-right bottom-left
**注意**: 尽量不要用百分比值
百分比值
在旧版本的 Chrome 和 Safari 中不支持。(fixed in Sepember 2010)
在 11.50 版本以前的 Opera 中实现有问题。
Gecko 2.0 (Firefox 4) 版本前实现不标准：水平半轴和垂直半轴都相对于盒子模型的宽度。
在旧版本的 iOS (iOS 5 之前) 和 Android 中 (WebKit 532 之前) 不支持。
border-image(边框图片)
border-image
CSS属性，允许在元素的边框上绘制图像。。这使得绘制复杂的外观组件更加简单。
使用 border-image 时，其将会替换掉 border-style 属性所设置的边框样式
默认值： 不可继承
border-image-source: none（添加一个URL）
border-image-slice: 100%（图片切割）（fill 关键词中间部分将会被作为 background-image）
border-image-width: 1（定义图像边框宽度。 ）
border-image-outset: none（属性定义边框图像可超出边框盒的大小）
border-image-repeat: stretch（拉伸） || repeat，round（平铺）
border-image-source
定义使用一张图片来代替边框样式；如果只为none，则仍然使用border-style 定义的样式。
默认值：none
border-image-source: url("img/border-image.png");
border-image-slice
通过规范将 border-image-source 的图片明确的分割为9个区域：
四个角，四边以及中心区域。并可指定偏移量
默认值：100% 不可继承
**值的百分比参照于image本身！！**
所有的边
border-image-slice: 30%;
垂直方向 | 水平方向
border-image-slice: 10% 30%;
顶部 | 垂直方向 | 底部
border-image-slice: 30 30% 45;
上 右 下 左
border-image-slice: 7 12 14 5 ;
中间的区域将不会被边框使用，但当设置有 fill 关键词时将会被作为 background-image。
这个关键词可以被设置在属性的任何一个位置(前面、后面或者两个值之间)
使用fill（fill可以放在任意位置）
border-image-slice: 10% 7 12 fill;
border-image-repeat
定义图片如何填充边框。
或为单个值，设置所有的边框；或为两个值，分别设置水平与垂直的边框。
默认值：stretch 不可继承
值：
stretch （拉伸）<br>
repeat，round（平铺）
border-image-width
定义图像边框宽度。
默认值：1 不可继承
border-image-outset
定义边框图像可超出边框盒的大小
默认值：0 不可继承
正值： 可超出边框盒的大小
background
css2中的background
background-color
设置元素的背景色
默认值： transparent 不可继承
background-image
用于为一个元素设置一个或多个背景图像，图像在绘制时，
以z轴方向堆叠的方式进行。先指定的图像会在之后指定的图像上面进行绘制。
**注意**：background-color会在image之下进行绘制，边框和内容会在image之上进行绘制
默认值：none 不可继承
background-repeat
属性,背景图像的重复方式。
背景图像可以沿着水平轴，垂直轴，两个轴重复，或者根本不重复。
默认值：repeat 不可继承
值：
repeat-x = repeat no-repeat
repeat-y = no-repeat repeat
repeat = repeat repeat
no-repeat = no-repeat no-repeat
第一个值代表水平方向。
第二个值代表垂直方向。
background-position
指定背景位置的初始位置
默认值：0% 0% 不可继承
值：
**百分比** :*参照尺寸为背景图片定位区域的大小减去背景图片的大小*
第一个值：元素在水平方向的位移
第二个值：元素在垂直方向的位移
**关键字**：
top left and left top
Same as '0% 0%'.
top, top center, and center top
Same as '50% 0%'.
right top and top right
Same as '100% 0%'.
left, left center, and center left
Same as '0% 50%'.
center and center center
Same as '50% 50%'.
right, right center, and center right
Same as '100% 50%'.
bottom left and left bottom
Same as '0% 100%'.
bottom, bottom center, and center bottom
Same as '50% 100%'.
bottom right and right bottom
Same as '100% 100%'.
如果只有一个值被指定，则这个值就会默认设置背景图片位置中的水平方向，
与此同时垂直方向的默认值被设置成50%。
background-attachment
决定背景是在视口中固定的还是随包含它的区块滚动的。
默认值：scroll 不可继承
值：
**fixed**
此关键字表示背景相对于视口固定。
即使一个元素拥有滚动机制，背景也不会随着元素的内容滚动 。<br>
**scroll**
此关键字表示背景相对于元素本身固定， 而不是随着它的内容滚动
css3中的background
background-origin:
设置背景的渲染的起始位置
值：
border-box
padding-box
content-box
background-clip:
指定对象的背景图像向外裁剪的区域。
取值：
border-box： 从border区域（含border）开始向外裁剪背景。
padding-box：从padding区域（含padding）开始向外裁剪背景。
content-box： 从content区域开始向外裁剪背景。
text： 从前景内容的形状（比如文字）作为裁剪区域向外裁剪，如此即可实现使用背景作为填充色之类的遮罩效果。
background-size
设置背景图片大小
默认值：auto auto 不可继承
值：
百分比：指定背景图片相对背景区（background positioning area）的百分比。
背景区由background-origin设置，默认为盒模型的内容区与内边距
auto： 以背景图片的比例缩放背景图片。
contain：图片宽或高完全覆盖内容区，原图比例不变
cover：图片完全覆盖内容区，图片可能会失真
>注意：
单值时，这个值指定图片的宽度，图片的高度隐式的为auto
两个值: 第一个值指定图片的宽度，第二个值指定图片的高度
background
background 是CSS简写属性，用来集中设置各种背景属性。
background 可以用来设置一个或多个属性:
background-color,
background-image,
background-position,
background-repeat,
background-size,
background-attachment。
默认值： 不可继承
background-image: none
background-position: 0% 0%
background-size: auto auto
background-repeat: repeat
background-origin: padding-box
background-clip: border-box
background-attachment: scroll
background-color: transparent
顺序无关
渐变
线性渐变
linear-gradient(); // 线性渐变
repeating-linear-gradient(60deg,red 0,blue 30%); // 重复的线性渐变
双颜色值的线性渐变:
background-image:linear-gradient(red,blue);
多颜色值的线性渐变:
background-image:linear-gradient(red,blue,pink,black);
改变渐变方向：
background-image:linear-gradient(to top left,red,blue);
使用角度：
background-image:linear-gradient(0deg,red,blue);
控制颜色节点的分布：
background-image:linear-gradient(90deg,red 10%,orange 15%,yellow 20%,green 30%,blue 50%,indigo 70%,violet 80%);
透明度的渐变：
background-image:linear-gradient(90deg,rgba(255,0,0,0) 50%,rgba(255,0,0,0.5),rgba(255,0,0,1) 60%);
重复渐变：
background: repeating-linear-gradient(90deg,red 10%,blue 30%);
径向渐变
radial-gradient()
repeating-radial-gradient();
双颜色值的径向渐变：
background-image:radial-gradient(red,blue);
多颜色值的径向渐变：
background-image: radial-gradient(red,blue,pink,black);
不均匀分布：
background-image:radial-gradient(red 50%,blue 70%);
改变渐变形状：（ellipse（默认为椭圆） || circle ）
background-image:radial-gradient(ellipse,red,blue);
渐变形状的尺寸大小：
background-image:radial-gradient(farthest-corner ellipse,red,blue);
closest-side 最近边
farthest-side 最远边
closest-corner 最近角
farthest-corner 最远角 （默认值）
改变圆心：
background-image:radial-gradient(closest-corner circle at 10px 10px,red,blue);
重复渐变:
background-image:repeating-radial-gradient(closest-corner circle,red 30%,blue 50%);