css复习整理(五)：CSS3新特性

一. 边框与背景

1. 边框

border-radius:倒角属性，可为边框添加倒角；border-image可以使用图片来创建边框，如url(/i/border.png) 30 30 round；

box-shadow可用来向框添加阴影，其语法为box-shadow: h-shadow v-shadow blur spread color inset。

2. 背景

background-size可以用来设置背景图片的尺寸；background-origin/clip可用来设置背景图片所在区域，可以是content-box，padding-box或者border-box；CSS3可设置多重背景图片，如background-image:url(bg_flower.gif),url(bg_flower_2.gif)。

二. 文本与字体

1. 文本

text-shadow给文本添加阴影效果，如text-shadow: 5px 5px 5px #FF0000；word-wrap:break-word可实现强制自动换行，这可能会导致单词被拆分，text-overflow是当文本溢出包含元素时的属性设置，语法为text-overflow: clip| ellipsis| string；换行规则可用如下属性设置word-break: normal| break-all| keep-all。

2. 字体

@font-face ：通过这一属性，可以使用自己想用的字体，及时这一字体在用户电脑中不存在。您必须首先定义字体的名称（比如 myFirstFont），然后指向该字体文件，可通过 font-family 属性来引用字体的名称 (myFirstFont)，举例如下：

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

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

三. 2D转换与3D转换

1. 2D转换



2. 3D转换

对于以上表格中的属性，增加 z方向的设置。还有transform-style，规定被嵌套元素如何在 3D 空间中显示；perspective规定 3D 元素的透视效果；backface-visibility定义元素在不面对屏幕时是否可见。

四.过渡与动画

1.过渡

不使用flash或javascript的情况下，使元素从一种样式变为另一种效果。有以下属性transition-property(要改变的属性名)，transition-duration(改变所经历的时间)，transition-timing-function(速度曲线)，transition-delay(效果何时开始)，都可以写在transition中，如下transition: property duration timing-function
delay。

2.动画

使用@keyframes 规则来创建动画，在创建动画时，需要将其捆绑到选择器，否则不会产生动画，须规定动画的名称和时长。举例如下：

div
{
width:100px;
height:100px;
background:red;
animation:myfirst 5s;
-moz-animation:myfirst 5s; /* Firefox */
-webkit-animation:myfirst 5s; /* Safari and Chrome */
-o-animation:myfirst 5s; /* Opera */
}

@keyframes myfirst
{
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;}
}

@-moz-keyframes myfirst /* Firefox */
{
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;}
}

@-webkit-keyframes myfirst /* Safari 和 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;}
}

@-o-keyframes myfirst /* Opera */
{
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;}
}

动画可设置多个属性，举例如下：animation: myfirst 5s linear 2s infinite alternate，依次规定了动画名称，动画时长，速度曲线，延迟时间，循环次数（infinite是无限循环）以及下一周期是否逆向播放。

五.多列布局与界面

1.多列布局

如同报纸的布局方式为多列布局，其对应属性如下：column-count(列数)，column-width(列宽)，column-fill(填充列的方式)；column-gap(列之间的间隔)， column-rule(列间分割线样式用来设置宽度，颜色，样式等) column-span(横跨列数)。

2.用户界面新特性

新的用户界面特性包括重设元素尺寸、盒尺寸以及轮廓等。resize 属性规定是否可由用户调整元素尺寸，如设置div，可由用户调整矩形的宽和高，举例如下：resize:both; overflow:auto。outline-offset 属性对轮廓进行偏移，并在超出边框边缘的位置绘制轮廓。