- animation（基礎動畫）eg: div
{
animation: myfirst 5s linear 2s infinite alternate; - /* Firefox: */
-moz-animation: myfirst 5s linear 2s infinite alternate; - /* Safari 和 Chrome: */
-webkit-animation: myfirst 5s linear 2s infinite alternate; - /* Opera: */
-o-animation: myfirst 5s linear 2s infinite alternate;
} background-clip（規定背景的繪製區域）eg: div
{
background-color:yellow;background-clip:content-box;
}background-origin（background-clip 與 background-origin是css3中引入的兩個跟元素背景相關的屬性，它們有相同的可選值，即border、padding、content三種，而且這兩個屬性表示的都是元素背景與元素邊框、補白(padding)和內容區域之間的某種關係。
比如，我們想要在邊框上顯示背景，我們可以使用background-origin幫我們實現（前提是邊框要是透明的，不然它會覆蓋住背景）
background-clip：border|padding|content
該屬性指定了背景在哪些區域可以顯示，但與背景開始繪製的位置無關，背景的繪製的位置可以出現在不顯示背景的區域，這時就相當於背景圖片被不顯示背景的區域裁剪了一部分一樣。
background-origin：padding|border|content
該屬性指定了背景從哪個區域(邊框、補白或內容)開始繪製,但也僅僅能控制背景開始繪製的位置，你可以用這個屬性在邊框上繪製背景，但邊框上的背景顯不顯示出來那就要由background-clip來決定了
）background-size（背景大小）border-radius(圓角)eg:向 div 元素添加圓角邊框：
div { border:2px solid; border-radius:25px; }border-image(邊框圖片)box-decoration-break（{ box-decoration-break: sBreak } 可能的值 sBreak 一個字符串,用於指定以下值之一 slice 默認值。不會針對整個方框呈現 border 、 padding 、 box-...）box-shadow（陰影）box-sizing（規定兩個並排的帶邊框的框：
div { box-sizing:border-box; -moz-box-sizing:border-box; /* Firefox */ -webkit-box-sizing:border-box; /* Safari */ width:50%; float:left; }）columns(規定列的寬度和列數：
div { columns:100px 3; -moz-columns:100px 3; /* Firefox */ -webkit-columns:100px 3; /* Safari 和 Chrome */ })clear-after（清除浮動）flex(定義兩個可伸縮的 p 元素。如果父元素的總寬度是 300 像素，則 #p1 的寬度是 100 像素，而 #p2 的寬度是 200 像素：
#p1 { -moz-box-flex:1.0; /* Firefox */ -webkit-box-flex:1.0; /* Safari 和 Chrome */ box-flex:1.0; border:1px solid red; } #p2 { -moz-box-flex:2.0; /* Firefox */ -webkit-box-flex:2.0; /* Safari 和 Chrome */ box-flex:2.0; border:1px solid blue; })font-stretch（讓所有的div元素的文本更寬：
div { font-stretch: expanded; }）font-size-adjust（通過指定font-size-adjust屬性，瀏覽器將調整字體大小，無論字體系列（"宋體"性質值0.58）：
div { font-size-adjust: 0.58; }）font-synthesis（@font-face是CSS3中的一個模塊，他主要是把自己定義的Web字體嵌入到你的網頁中，隨着@font-face模塊的出現，我們在Web的開發中使用字體不怕只能使用Web安全字體，你們當中或許有許多人會不自然的問，這樣的東西IE能支持嗎？當我告訴大家@font-face這個功能早在IE4就支持了你肯定會感到驚訝。我的Blog就使用了許多這樣的自定義Web字體，比如說首頁的Logo，Tags以及頁面中的手寫英文體，很多朋友問我如何使用，能讓自己的頁面也支持這樣的自定義字體，一句話這些都是@font-face實現的，爲了能讓更多的朋友知道如何使用他，今天我主要把自己的一點學習過程貼上來和大家分享。
首先我們一起來看看@font-face的語法規則：
@font-face { font-family: <YourWebFontName>; src: <source> [<format>][,<source> [<format>]]*; [font-weight: <weight>]; [font-style: <style>]; }）font-kerning（適用於在字體中以代碼形式進行字符對間距調整p {
font-kerning: none;
}）font-variant-caps（設置小型大寫字母的字體顯示文本,）hanging-punctuation（目前主流瀏覽器都不支持 hanging-punctuation 屬性。在 p 元素首行的開始邊緣之外放置一個標點符號：
p {hanging-punctuation:first;}）hyphens（設置如何對單詞進行拆分,以改善段落的佈局）icon（css3實現Icon UI圖標）image-resolution（規定圖像的正確分辨率）image-orientation（目前只有 Firefox26 支持這個讓圖片旋轉的 css 屬性）line-break（在恰當的斷字點進行換行：
p.test {word-break:hyphenate;}）object-fit（object-position屬性決定了它的盒子裏面替換元素的對齊方式。其取值和CSS中background-position屬性取值一樣。如下所示：
img { height: 100px; width: 100px; object-fit: contain; object-position: top 75%; }）object-position（object-position屬性決定了它的盒子裏面替換元素的對齊方式。其取值和CSS中background-position屬性取值一樣。如下所示：
img { height: 100px; width: 100px; object-fit: contain; object-position: top 75%; }）opacity（透明度）outline-offset（規定邊框邊緣之外 15 像素處的輪廓：
div { border:2px solid black; outline:2px solid red;outline-offset:15px;}）overflow-wrap/word-wrap（允許長單詞換行到下一行：
p.test {word-wrap:break-word;}）backface-visibility（隱藏被旋轉的 div 元素的背面：
div { backface-visibility:hidden; -webkit-backface-visibility:hidden; /* Chrome 和 Safari */ -moz-backface-visibility:hidden; /* Firefox */ -ms-backface-visibility:hidden; /* Internet Explorer */ }）perspective（設置元素被查看位置的視圖：
div { perspective: 500; -webkit-perspective: 500; /* Safari 和 Chrome */ }）perspective-origin（設置 3D 元素的基點位置：
div { perspective:150; perspective-origin: 10% 10%; -webkit-perspective:150; /* Safari 和 Chrome */ -webkit-perspective-origin: 10% 10%; /* Safari 和 Chrome */ }）pointer-events(CSS新屬性pointer-events：字面理解是點擊鼠標事件，值分別是auto和none。
當使用pointer-events:none,表示它將捕獲不到任何點擊，而只是讓事件穿透到它的下面。代碼如下：
<style> .overlay { pointer-events: none; } </style> <div id="overlay" class="overlay"></div>)resize（重置）tab-size（檢索或設置對象中的製表符的長度。）text-align-last（設置或檢索對象中內容的水平對齊方式）text-decoration-line（檢索或設置對象中的文本裝飾線條的位置。text-decoration-skip（設置對象中的文本裝飾線條的形狀）text-decoration-position（text-decoration-color：<color>
- <color>：
- 指定顏色。
檢索或設置對象中的文本裝飾線條的顏色text-decoration-style（-
text-decoration-style：solid | double | dotted | dashed | wavy
-
默認值：solid
-
取值：
-
- solid：
- 實線
- double：
- 雙線
- dotted：
- 點狀線條
- dashed：
- 虛線
- wavy：
- 波浪線
-
說明：
-
檢索或設置對象中的文本裝飾線條的形狀。
-
- 對應的腳本特性爲textDecorationStyle。
）text-emphasis(目前主流瀏覽器都不支持 text-emphasis 屬性。
)text-emphasis 屬性是簡寫屬性，用於在一個聲明中設置 text-emphasis-style 和 text-emphasis-color。
text-justify（齊行改變單詞間的間隔：
div { text-align:justify;text-justify:inter-word;}）text-overflow（文本溢出隱藏）transform（旋轉 div 元素：
div { transform:rotate(7deg); -ms-transform:rotate(7deg); /* IE 9 */ -moz-transform:rotate(7deg); /* Firefox */ -webkit-transform:rotate(7deg); /* Safari 和 Chrome */ -o-transform:rotate(7deg); /* Opera */ }）transform-style（使被轉換的子元素保留其 3D 轉換：
div { transform: rotateY(60deg); transform-style: preserve-3d; -webkit-transform: rotateY(60deg); /* Safari 和 Chrome */ -webkit-transform-style: preserve-3d; /* Safari 和 Chrome */ }）text-shadow（基礎的文本陰影效果：
h1 { text-shadow: 5px 5px 5px #FF0000; }）transition(把鼠標指針放到 div 元素上，其寬度會從 100px 逐漸變爲 300px：
div { width:100px; transition: width 2s; -moz-transition: width 2s; /* Firefox 4 */ -webkit-transition: width 2s; /* Safari 和 Chrome */ -o-transition: width 2s; /* Opera */ })word-break（在恰當的斷字點進行換行：
p.test {word-break:hyphenate;}）word-spacing（規定段落中的字間距是 25 像素：
p {word-spacing:25px;}）writing-mode（設置文本的垂直顯示）
css2 和 css3的區別
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章
技術整理（陳年佳釀）
技術站點 Hacker News：非常棒的針對編程的鏈接聚合網站 Programming reddit：同上 MSDN：微軟相關的官方技術集中地，主要是文檔類 infoq：企業級應用，關注軟件開發領域