CSS3

1.新的边框属性
border-image 用图片做边框

border-image:url(border.png) 30 30 round;//round(铺满)stretch(拉伸)
-moz-border-image:url(border.png) 30 30 round; /* 老的 Firefox */
-webkit-border-image:url(border.png) 30 30 round; /* Safari 和 Chrome */
-o-border-image:url(border.png) 30 30 round; /* Opera */

border-radius 圆角边框

border-radius:25px;//也可以写成%
border-radius: 2em 1em 4em / 0.5em 3em;//相当于border-radius: 2em 1em 4em 1em/ 0.5em 3em 0.5em 3em; 

box-shadow 添加一个或多个阴影

box-shadow: 10px 10px 5px #888888;//右（负数为左），下（负数为上），羽化程度，颜色

2.背景图片的设置

div
{//background-size 属性：背景图片的尺寸
    background:url(bg_flower.gif);//可以多张图片逗号隔开
    -moz-background-size:63px 100px; /* 老版本的 Firefox */
    background-size:63px 100px;
    //background-size:40% 100%;
    background-repeat:no-repeat;
}

background-clip:content-box; //border-box,padding-box规定绘制区域
background-origin:content-box;//规定图片区域

3.新的文本属性

hanging-punctuation 规定标点字符是否位于线框之外。
punctuation-trim 规定是否对标点字符进行修剪。
text-align-last 设置如何对齐最后一行或紧挨着强制换行符之前的行。
text-emphasis 向元素的文本应用重点标记以及重点标记的前景色。
text-justify 规定当 text-align 设置为 “justify” 时所使用的对齐方法。
text-outline 规定文本的轮廓。
text-overflow 规定当文本溢出包含元素时发生的事情。
text-shadow 向文本添加阴影。
text-wrap 规定文本的换行规则。
word-break 规定非中日韩文本的换行规则。
word-wrap 允许对长的不可分割的单词进行分割并换行到下一行。

4.CSS3 字体
在 CSS3 之前，必须使用已在用户计算机上安装好的字体。通过 CSS3，可以使用任意字体。

<style> 
@font-face{
    font-family: myFirstFont;
    src: url('Sansation_Light.ttf'),
         url('Sansation_Light.eot'); /* IE9+ */
}

div{
    font-family:myFirstFont;
}
</style>

font-family:name 必需,规定字体的名称。
src:url(’ ‘) 必需,定义字体文件的 URL。
font-stretch :normal/condensed/ultra-condensed……可选,定义拉伸字体
font-style:normal/italic/oblique 可选,定义字体的样式。默认是”normal”
font-weight:normal/bold/100/200……可选,定义字体的粗细
unicode-range 可选,定义字体支持的 UNICODE 字符范围。默认是”U+0-10FFFF”

5.2D 转换
transform:translate(50px,100px) //位移
transform:rotate(5deg) //正数顺时针旋转，负数逆时针
transform:scale(2,4) //元素尺寸,倍数
transform:skew(30deg,20deg) //围绕 X 轴把元素翻转 30 度，围绕 Y 轴翻转 20 度
transform:matrix(2,0.5,-0.5,2,50,50)//其他的不可同时使用所以用matrix使用所有变换（2，2）scale，（50，50）translate，（0.5,-0.5）skew

6.3D 转换
Internet Explorer 10 和 Firefox 支持 3D 转换
Chrome 和 Safari 需要前缀 -webkit-
Opera 仍然不支持 3D 转换（它只支持 2D 转换）
rotateX()
rotateY()

7.过渡
需要定义两个样式，从一个变为另一个

div
{
    width:100px;
    height:100px;
    background:yellow;
    transition:width 2s;//变宽度，时间2s。可以添加多个属性，由逗号隔开
    -moz-transition:width 2s; /* Firefox 4 */
    -webkit-transition:width 2s; /* Safari and Chrome */
    -o-transition:width 2s; /* Opera */
}

div:hover
{
    width:200px;
}

transition: width 1s linear 2s;
transition-property 规定应用过渡的 CSS 属性的名称
transition-duration 定义过渡效果花费的时间。默认是 0
transition-timing-function 规定过渡效果的时间曲线。默认是 “ease”
transition-delay 规定过渡效果何时开始。默认是 0

8.动画

@keyframes myfirs{
    from {background: red;}
    to {background: yellow;}
}
@keyframes mysecond//不同浏览器记得前缀 -webkit-keyframes chrome...
{
    0%   {background: red; left:0px; top:0px;}
    25%  {background: yellow; left:200px; top:0px;}
    50%  {background: blue; left:200px; top:200px;}
    75%  {background: green; left:0px; top:200px;}
    100% {background: red; left:0px; top:0px;}
}

div
{
    animation: myfirst 5s;
    animation-iteration-count:3;//播放次数 infinite无限
    animation-timing-function:linear;//从开头到结尾以相同的速度来播放
    animation-delay:2s;
    animation-direction: normal|alternate;//轮流正反方向播放
    animation-play-state: paused|running;
    //animation: name duration timing-function delay iteration-count direction;可以都写在一起除了state
}

9.多列

div
{
    column-count:3;
    column-gap:40px;
    column-rule:3px outset #ff0000;//列规则
    ...还有一些其他属性
}

10.界面
appearance 允许您将元素设置为标准用户界面元素的外观
box-sizing 允许您以确切的方式定义适应某个区域的具体内容。
icon 为创作者提供使用图标化等价物来设置元素样式的能力。
nav-down 规定在使用 arrow-down 导航键时向何处导航。
nav-index 设置元素的 tab 键控制次序。
nav-left 规定在使用 arrow-left 导航键时向何处导航。
nav-right 规定在使用 arrow-right 导航键时向何处导航。
nav-up 规定在使用 arrow-up 导航键时向何处导航。
outline-offset 对轮廓进行偏移，并在超出边框边缘的位置绘制轮廓。
resize 规定是否可由用户对元素的尺寸进行调整，both高度和宽度，horizontal可调整宽度，vertical高度