css3新增特性

选择器

E:nth-last-child(n) 
E:nth-of-type(n) 
E:nth-last-of-type(n) 
E:last-child 
E:first-of-type 
E:only-child 
E:only-of-type 
E:empty 
E:checked 
E:enabled 
E:disabled 
E::selection 
E:not(s)

@Font-face
Font-face 可以用来加载字体样式，而且它还能够加载服务器端的字体文件，让客户端显示客户端所没有安装的字体。

@font-face {
    font-family: BorderWeb;
    src: url(BORDERW0.eot);
}

@font-face {
    font-family: Runic;
    src: url(RUNICMT0.eot);
}

.border {
    FONT-SIZE: 35px;
    COLOR: black;
    FONT-FAMILY: "BorderWeb"
}

.event {
    FONT-SIZE: 110px;
    COLOR: black;
    FONT-FAMILY: "Runic"
}

声明的两个服务端字体，其字体源指向“BORDERW0.eot”和“RUNICMT0.eot”文件，并分别冠以“BorderWeb”和“Runic”的字体名称。声明之后，我们就可以在页面中使用了：“ FONT-FAMILY: "BorderWeb" ” 和 “ FONT-FAMILY: "Runic" ”。

这种做法使得我们在开发中如果需要使用一些特殊字体，而又不确定客户端是否已安装时，便可以使用这种方式。

Word-wrap & Text-overflow，Text-decoration 样式
设置word-wrap: break-word会自动换行

设置Text-overflow：text-overflow 则设置或检索当当前行超过指定容器的边界时如何显示（用来显示文字超出时的省略号）

设置Text-decoration：CSS3 里面开始支持对文字的更深层次的渲染（设置文字内部的样式）

multi-column layout
设置multi-column layout：可以设置 CSS3 多列布局

边框和颜色（color, border）
css3支持rgba

color: rgba(255, 0, 0, 0.75); 
background: rgba(0, 0, 255, 0.75);

css3提供圆角

border-radius

css3渐变 Gradient
左上（0% 0%）到右上（0% 100%）即从左到右水平渐变：

background-image:-webkit-gradient(linear,0% 0%,100% 0%,from(#2A8BBE),to(#FE280E));

径向渐变
关键是径向渐变（radial）,这不是从一个点到一个点的渐变，而从一个圆到一个圆的渐变。

backgroud: -webkit-gradient(radial,50 50,50,50 50,0,from(black),color-stop(0.5,red),to(blue));

CSS3 的阴影（Shadow）和反射（Reflect）效果
阴影效果，阴影效果既可用于普通元素，也可用于文字

.class1{ 
text-shadow:5px 2px 6px rgba(64, 64, 64, 0.5); 
} 
 
.class2{ 
box-shadow:3px 3px 3px rgba(0, 64, 128, 0.3); 
}

CSS3 的背景效果
CSS3 多出了几种关于背景（background）的属性，我们这里会简单介绍一下：

首先：“Background Clip”，该属确定背景画区，有以下几种可能的属性：

• background-clip: border-box; 背景从 border 开始显示 ;

• background-clip: padding-box; 背景从 padding 开始显示 ;

• background-clip: content-box; 背景显 content 区域开始显示 ;

• background-clip: no-clip; 默认属性，等同于 border-box;
  通常情况，我们的背景都是覆盖整个元素的，现在 CSS3 让您可以设置是否一定要这样做。这里您可以设定背景颜色或图片的覆盖范围。

其次：“Background Origin”，用于确定背景的位置，它通常与 background-position 联合使用，您可以从 border、padding、content 来计算 background-position（就像 background-clip）。

• background-origin: border-box; 从 border. 开始计算 background-position;

• background-origin: padding-box; 从 padding. 开始计算 background-position;

• background-origin: content-box; 从 content. 开始计算 background-position;

还有，“Background Size”，常用来调整背景图片的大小，注意别和 clip 弄混，这个主要用于设定图片本身。有以下可能的属性：

• background-size: contain; 缩小图片以适合元素（维持像素长宽比）

• background-size: cover; 扩展元素以填补元素（维持像素长宽比）

• background-size: 100px 100px; 缩小图片至指定的大小。

• background-size: 50% 100%; 缩小图片至指定的大小，百分比是相对包含元素的尺寸。

最后，“Background Break”属性，CSS3 中，元素可以被分成几个独立的盒子（如使内联元素 span 跨越多行），background-break 属性用来控制背景怎样在这些不同的盒子中显示。

CSS3 的盒子模型
盒子模型为开发者提供了一种非常灵活的布局方式，但是支持这一特性的浏览器并不多，目前只有 webkit 内核的新版本 safari 和 chrome 以及 gecko 内核的新版本 firefox。

display可以设置box来设置相关的盒子模型

.boxcontainer { 
    width: 1000px; 
    display: -webkit-box; 
    display: -moz-box; 
    -webkit-box-orient: horizontal; 
    -moz-box-orient: horizontal; 
} 
 
.item { 
    background: #357c96; 
    font-weight: bold; 
    margin: 2px; 
    padding: 20px; 
    color: #fff; 
    font-family: Arial, sans-serif; 
}

注意这里的“display: -webkit-box; display: -moz-box;”，它针对 webkit 和 gecko 浏览器定义了该元素的盒子模型。注意这里的“-webkit-box-orient: horizontal;”，他表示水平排列的盒子模型。

CSS3 的 Transitions, Transforms 和 Animation
Transition，有下面这些具体属性：

transition-property：用于指定过渡的性质，比如 transition-property:backgrond 就是指 backgound 参与这个过渡

transition-duration：用于指定这个过渡的持续时间

transition-delay：用于制定延迟过渡的时间

transition-timing-function：用于指定过渡类型，有 ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier

主要用于伪动作：hover，当height，width，background-color等变化时的效果。

Transform
再来看看 Transform，其实就是指拉伸，压缩，旋转，偏移等等一些图形学里面的基本变换。

.skew {
    -webkit-transform: skew(50deg);
}

.scale {
    -webkit-transform: scale(2, 0.5);
}

.rotate {
    -webkit-transform: rotate(30deg);
}

.translate {
    -webkit-transform: translate(50px, 50px);
}

.all_in_one_transform {
    -webkit-transform: skew(20deg) scale(1.1, 1.1) rotate(40deg) translate(10px, 15px);
}

“skew”是倾斜，“scale”是缩放，“rotate”是旋转，“translate”是平移。最后需要说明一点，transform 支持综合变换。

Animation
Animation，它可以说开辟了 CSS 的新纪元，让 CSS 脱离了“静止”这一约定俗成的前提。

@-webkit-keyframes anim1 {
    0% {
        Opacity: 0;
        Font-size: 12px;
    }
    100% {
        Opacity: 1;
        Font-size: 24px;
    }
}

.anim1Div {
    -webkit-animation-name: anim1;
    -webkit-animation-duration: 1.5s;
    -webkit-animation-iteration-count: 4;
    -webkit-animation-direction: alternate;
    -webkit-animation-timing-function: ease-in-out;
}

参考资料：深入了解 CSS3 新特性