transform
perspective
觀察者的位置
translateN
圖片移動(dòng)
我們觀察的是圖片在屏幕上的投影
transition
過渡
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鳥教程(runoob.com)</title>
<style>
div {
width: 100px;
height: 100px;
background: red;
-webkit-transition: width 2s, height 2s, -webkit-transform 2s; /* For Safari 3.1 to 6.0 */
transition: width 2s, height 2s, transform 2s;
}
div:hover {
width: 200px;
height: 200px;
-webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
transform: rotate(180deg);
}
</style>
</head>
<body>
<p><b>注意：</b>該實(shí)例無(wú)法在 Internet Explorer 9 及更早 IE 版本上工作落塑。</p>
<div>鼠標(biāo)移動(dòng)到 div 元素上，查看過渡效果钝满。</div>
</body>
</html>
animation
動(dòng)畫
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鳥教程(runoob.com)</title>
<style>
div
{
width:100px;
height:100px;
background:red;
position:relative;
animation:myfirst 5s;
-webkit-animation:myfirst 5s; /* Safari and Chrome */
}
@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;}
}
@-webkit-keyframes myfirst /* Safari and 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;}
}
</style>
</head>
<body>
<p><b>注意:</b> 該實(shí)例在 Internet Explorer 9 及更早 IE 版本是無(wú)效的畦木。</p>
<div></div>
</body>
</html>
邊框?qū)傩?/strong>
border-image ：對(duì)提供圖片裁邊袖扛，獲取邊緣圖像，設(shè)置填充方式十籍，數(shù)值相對(duì)原圖
{
-webkit-border-image:url(border.png) 30 30 round; /* Safari 5 and older /
-o-border-image:url(border.png) 30 30 round; / Opera */
border-image:url(border.png) 30 30 round;
}
配合border使用：border使用剪裁結(jié)果填充蛆封，跟原圖沒什么關(guān)系了
border:15px solid transparent;
:active
:active 偽類向激活（在鼠標(biāo)點(diǎn)擊與釋放之間發(fā)生的事件）的元素添加特殊的樣式。
box-sizing
CSS3 box-sizing 屬性在一個(gè)元素的 width 和 height 中包含 padding(內(nèi)邊距) 和 border(邊框)勾栗。
CSS position 屬性
absolute 定位
絕對(duì)定位的元素的位置相對(duì)于最近的已定位父元素惨篱，如果元素沒有已定位的父元素，那么它的位置相對(duì)于<html>:
position .png
文章中示例代碼主要來源于菜鳥教程
