CSS3新的UI方案

文本新增属性

opacity：属性设置一个元素的透明度级别。0为完全透明，1为完全不透明
rgba函数：rgba(red, green, blue, alpha)。前三个参数值范围 0 ~ 255或 0% ~ 100%，alpha透明度范围为0~1
text-shadow: h-shadow v-shadow blur color;属性连接一个或更多的阴影文本。
direction: 文字排版方向，ltr或rtl;需搭配unicode-bidi: bidi-override;一起使用。二者皆属于CSS2
text-overflow: clip|ellipsis|"string"|initial|inherit;其中"string"只在 Firefox 浏览器下有效。ellipsis需要搭配white-space: nowrap;overflow: hidden;使用
word-break: normal|break-all|keep-all;属性指定非CJK（中日韩）脚本的断行规则。keep-all只能在半角空格或连字符处换行。break-all允许在单词内换行。
word-wrap: normal|break-word;属性允许长的内容可以自动换行。break-word在长单词或 URL 地址内部进行换行。

盒模型新增属性：阴影、圆角、边框图片、背景图片

box-shadow: h-shadow v-shadow blur spread color inset; 属性可以设置一个或多个下拉阴影的框。
border-radius: 1-4 length|% / 1-4 length|%; 四三二一值的情况（左上|右上|右下|左下）（左上|右上、左下|右下）（左上、右下|右上、左下）（左上、右上、右下、左下）
可以联系margin和padding来记忆。将左上角看做上，那（左上|右上|右下|左下）就是（上|右|下|左），其余同理。一个例子如下：

border-radius: 4px 3px 6px / 2px 4px;
/* 等价于： */
border-top-left-radius:     4px 2px;
border-top-right-radius:    3px 4px;
border-bottom-right-radius: 6px 2px;
border-bottom-left-radius:  3px 4px;

border-image: source slice width outset repeat|initial|inherit;默认值none 100% 1 0 stretch
border-image-source: none|image; 指定要使用的图像，如border-image-source: linear-gradient(red,blue)或border-image-source: url(border.png);
border-image-slice: number|%|fill; 属性指定图像的边界向内偏移。表示切片，拥有5个属性值表示切线位置，顺序上右下左。第五个属性fill将内容区填满限制在渐变色中。如 border-image-slice: 30 30 30 30 fill; （虽然推移的实际距离的确是按照px计算的，但是书写代码时不能带单位）
border-image-width: number|%|auto; 属性指定图像边界的宽度。

border-image-width: 70px;
border-image-width: 1rem;
border-image-width: 50%;    //以盒子自身的宽高为参考，50%时，四角的图案完全覆盖盒子
border-image-width: 2;      //border-width的倍数
border-image-width: auto;   //使用border-image-slice的数值

border-image-repeat: stretch|repeat|round|initial|inherit;默认值为stretch拉伸,repeat为重复,round重复且压缩凑整
border-image-outset: length|number;若为length（带单位）则设置边框图像与边框（border-image）的距离，默认为0。若为number则代表相应的 border-width 的倍数

resize: none|both|horizontal|vertical;属性指定一个元素是否是由用户调整大小的。 box-sizing: content-box|border-box|inherit；定义如何计算一个元素的总宽度和总高度，主要设置是否需要加上内边距(padding)和边框等。

background-image: url(first.gif), url(second.gif); 前面的图片在上层，所以first.gif在最上面
background-size: length|percentage|cover|contain; 规定背景图片的尺寸。 省流：cover剪裁contain不剪裁
background-size 属性的 cover 和 contain 值的区别在于它们如何调整背景图像的大小以适应容器。cover 值会将图像缩放（同时保持其比例）为最小可能的大小以填充容器（即：其高度和宽度完全覆盖容器），不留空隙。如果背景与元素的比例不同，则图像将垂直或水平裁剪。而 contain 值则会尽可能大地缩放图像，使其在容器内不被裁剪或拉伸。如果容器大于图像，则会出现图像平铺，除非 background-repeat 属性设置为 no-repeat 。

background-origin: padding-box|border-box|content-box;规定背景图片的定位区域，padding-box（默认值）是指图片从填充框开始渲染，border-box边界框，content-box内容框。

background-clip: border-box|padding-box|content-box; 属性指定背景绘制区域。border-box（默认值）背景绘制在边框方框内（剪切成边框方框）。padding-box 背景绘制在衬距方框内（剪切成衬距方框）。content-box 背景绘制在内容方框内（剪切成内容方框）。
background-clip 和 background-origin 属性的最根本区别在于：background-clip 是对背景图片的裁剪，而 background-origin 是对背景图片设置起始点。简单来说，background-origin 属性规定了指定背景图片 background-image 属性的原点位置的背景相对区域，而 background-clip 属性则规定了背景的绘制区域。
省流：同时设置background-clip 和 background-origin时，剪去的部分就是background-clip 和 background-origin中间的部分

background-position：left top|left center|x% y%; 设置背景图像的起始位置。若只指定一个值，则第二个值默认为center或50%。在Firefox和Opera，background-attachment必须设置为 "fixed（固定）".

background-attachment：scroll|fixed|local|initial|inherit。 是css1属性
background-attachment值为scroll，这意味着背景图像将保持在本地视图（div本身）内固定，但将随主视图（浏览器窗口）滚动。background-attachment值为local，这意味着背景图像将同时随主视图和本地视图滚动。

新增UI样式 渐变（线性|径向）

线性：

/* 指定方向 to bottom、to top、to right、to left、to bottom right，等等   */
background-image: linear-gradient(direction, color-stop1, color-stop2, ...); 
background-image: linear-gradient(90deg,red 10%,orange 15%,yellow 20%,green 30%,blue 50%,indigo 70%,violet 80%);
background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));/* 透明度 */
/* 指定角度(-180deg,180deg] */
background-image: linear-gradient(angle, color-stop1, color-stop2);
background-image: linear-gradient(-90deg, red, yellow);
/* 重复的线性渐变 */
background-image: repeating-linear-gradient(red, yellow 10%, green 20%);

径向：

/* 属性值shape：ellipse(默认)|circle   size:closest-side|farthest-side|closest-corner|farthest-corner(默认)  position：x y | center(默认)*/
background-image: radial-gradient(shape size at position, start-color, ..., last-color);
background-image: radial-gradient(circle closest-side at 60% 55%, red, yellow, black);

/* 重复径向渐变 */
background-image: repeating-radial-gradient(red, yellow 10%, blue 40%);