歡迎訪問我的博客https://qqqww.com/缨历，祝所有碼農(nóng)同胞們早日走上人生巔峰于颖，迎娶白富美~~

詳細請移步CSS3新特性

本文內(nèi)容有點多页畦，我會抽空拆分以方便道友們閱讀

1 前言

用 CSS3 做過一些小動畫辜御，很好用，特別是里面一些新特性元践，都是 CSS2 不可比擬的，這里參照W3C和菜鳥教程等整理一些出來，當做筆記佳窑，也當做教程，共勉父能！

CSS3 相比 CSS 2 對邊框神凑、背景、漸變何吝、文本效果溉委、字體、轉換效果爱榕、過渡瓣喊、動畫、圖片黔酥、用戶界面藻三、盒模型洪橘、媒體查詢等都有了很大的改進，新增了不少功能和屬性

2 CSS3邊框

用 CSS3棵帽，可以創(chuàng)建圓角邊框熄求，添加陰影框，并作為邊界的形象而不使用設計程序

2.1 屬性

• border-radius
• box-shadow
• border-image

2.2 兼容性

• IE9 支持 border-radius 和 box-shadow 屬性
• IE 瀏覽器不支持 border-image 屬性
• Firefox岖寞、Chrome 以及 Safari 支持所有新的邊框屬性
• 對于 border-image抡四，Safari 5 以及更老的版本需要前綴 -webkit-
• Opera 支持 border-radius 和 box-shadow 屬性，但是對于 border-image 需要前綴 -o-

2.3 CSS3 圓角邊框

CSS3中border-radius屬性是用于創(chuàng)建圓角的

2.3.1 語法

border-radius：n1, n2, n3, n4 
/* n1 - n4 分別代表左上角仗谆、右上角指巡、右下角、左下角 隶垮，值可為百分比或像素值*/

2.3.2 例子

div {
    width: 100px;
    height: 100px;
    /* border-radius: 25px; */
    border-radius: 25%;
}

2.4 CSS3盒陰影

CSS3中的box-shadow屬性被用來添加陰影

2.4.1 語法

box-shadow: 水平陰影的位置 垂直陰影的位置 模糊距離 陰影的大小 陰影的顏色 陰影開始方向（默認是從里往外藻雪，設置inset就是從外往里）

2.4.2 例子

div 
{ 
    width: 100px;
    height: 100px;
    background-color: yellow;
    box-shadow: 10px 10px 5px #888888 inset; 
}

2.5 CSS3邊界圖片

border-image 屬性允許你指定一個圖片作為邊框！用于創(chuàng)建上文邊框的原始圖像

2.5.1 語法

border-image: 圖片url 圖像邊界向內(nèi)偏移 圖像邊界的寬度(默認為邊框的寬度) 用于指定在邊框外部繪制偏移的量（默認0） 鋪滿方式--重復（repeat）狸吞、拉伸（stretch）或鋪滿（round）（默認：拉伸（stretch））

2.5.2 例子

div { 
    border-image:url(border.png) 30 30 round; 
    -webkit-border-image:url(border.png) 30 30 round; /* Safari 5 and older */ 
    -o-border-image:url(border.png) 30 30 round; /* Opera */ 
}

Border

3 CSS3背景

CSS3更新了幾個新的背景屬性勉耀，提供更大背景元素控制，通過這幾個背景屬性蹋偏，您能夠做出更加精美的樣式

3.1 屬性

• background-image
• background-size
• background-origin
• background-clip

3.2 兼容性

表格中的數(shù)字表示支持該屬性的第一個瀏覽器版本號便斥。

緊跟在 -webkit-, -ms- 或 -moz- 前的數(shù)字為支持該前綴屬性的第一個瀏覽器版本號。

3.3 CSS3 背景圖片

CSS3中可以通過background-image屬性添加背景圖片

3.3.1 語法

background-image: url, 定位, 平鋪

3.3.2 例子

不同的背景圖像和圖像用逗號隔開威始，所有的圖片中顯示在最頂端的為第一張

#example1 { 
    background-image: url(img_flwr.gif), url(paper.gif); 
    background-position: right bottom, left top; 
    background-repeat: no-repeat, repeat; 
}

可以給不同的圖片設置多個不同的屬性枢纠，每張圖片之間依然用逗號隔開

#example1 {
    background: url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top repeat;
}

3.4 CSS3 背景圖像大小

background-size指定背景圖像的大小。CSS3以前黎棠，背景圖像大小由圖像的實際大小決定

3.4.1 語法

background-size: 寬 高; // 寬高可以是像素值晋渺，也可以是百分比

3.4.2 例子

像素值

div
{
    background: url(img_flwr.gif);
    background-size: 80px 60px;
    background-repeat: no-repeat;
}

相對于父元素的寬度和高度的百分比的大小

div
{
    background: url(img_flwr.gif);
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

3.5 CSS3 背景起始位置

background-Origin屬性指定了背景圖像的位置區(qū)域

3.5.1 語法

content-box, padding-box,和 border-box區(qū)域內(nèi)可以放置背景圖像。

background-Origin: content-box, padding-box,和 border-box;
// 三個屬性三選一脓斩，區(qū)域內(nèi)可以放置背景圖像

img

3.5.2 例子

在 content-box 中定位背景圖片

div 
{ 
    background: url(img_flwr.gif); 
    background-repeat: no-repeat; 
    background-size: 100% 100%; 
    background-origin: content-box; 
}

3.6 CSS3 背景圖像裁剪

CSS3中background-clip背景剪裁屬性是從指定位置開始繪制

3.6.1 語法

從content-box, padding-box,或 border-box位置進行背景圖像裁剪

background-clip: content-box, padding-box,和 border-box;
// 三個屬性三選一木西，區(qū)域內(nèi)可以放置背景圖像

3.6.2 例子

從 content-box 開始裁剪

#example1 { 
    border: 10px dotted black; 
    padding: 35px; 
    background: yellow; 
    background-clip: content-box; 
}

4 CSS3漸變

CSS3 漸變（gradients）可以讓你在兩個或多個指定的顏色之間顯示平穩(wěn)的過渡

4.1 屬性

• 線性漸變（Linear Gradients）- 向下/向上/向左/向右/對角方向
• 徑向漸變（Radial Gradients）- 由它們的中心定義

4.2 兼容性

表中的數(shù)字指定了完全支持該屬性的第一個瀏覽器版本。

后邊跟 -webkit-随静、-moz- 或 -o- 的數(shù)字指定了需加上前綴才能支持屬性的第一個版本

4.3 CSS3線性漸變

為了創(chuàng)建一個線性漸變八千，你必須至少定義兩種顏色結點。顏色結點即你想要呈現(xiàn)平穩(wěn)過渡的顏色燎猛。同時恋捆，你也可以設置一個起點和一個方向（或一個角度）

線性漸變

4.3.1 語法

linear-gradient

background: linear-gradient(direction, color-stop1, color-stop2, ...); 

4.3.2 例子

從上到下：從頂部開始的線性漸變。起點是紅色扛门，慢慢過渡到藍色

#grad { 
  background: -webkit-linear-gradient(red, blue); /* Safari 5.1 - 6.0 */ 
  background: -o-linear-gradient(red, blue); /* Opera 11.1 - 12.0 */ 
  background: -moz-linear-gradient(red, blue); /* Firefox 3.6 - 15 */ 
  background: linear-gradient(red, blue); /* 標準的語法 */ 
}

從左到右：從左邊開始的線性漸變鸠信。起點是紅色，慢慢過渡到藍色

#grad { 
  background: -webkit-linear-gradient(left, red , blue); /* Safari 5.1 - 6.0 */ 
  background: -o-linear-gradient(right, red, blue); /* Opera 11.1 - 12.0 */ 
  background: -moz-linear-gradient(right, red, blue); /* Firefox 3.6 - 15 */ 
  background: linear-gradient(to right, red , blue); /* 標準的語法 */ 
}

對角：從左上角開始（到右下角）的線性漸變论寨。起點是紅色星立，慢慢過渡到藍色

#grad { 
  background: -webkit-linear-gradient(left top, red , blue); /* Safari 5.1 - 6.0 */ 
  background: -o-linear-gradient(bottom right, red, blue); /* Opera 11.1 - 12.0 */ 
  background: -moz-linear-gradient(bottom right, red, blue); /* Firefox 3.6 - 15 */ 
  background: linear-gradient(to bottom right, red , blue); /* 標準的語法 */ 
}

使用多個顏色節(jié)點從上到下的線性漸變

#grad { 
  background: -webkit-linear-gradient(red, green, blue); /* Safari 5.1 - 6.0 */ 
  background: -o-linear-gradient(red, green, blue); /* Opera 11.1 - 12.0 */ 
  background: -moz-linear-gradient(red, green, blue); /* Firefox 3.6 - 15 */ 
  background: linear-gradient(red, green, blue); /* 標準的語法 */ 
}

帶有彩虹顏色和文本從左到右的線性漸變

#grad { 
  /* Safari 5.1 - 6.0 */ 
  background: -webkit-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet); 
 /* Opera 11.1 - 12.0 */ 
  background: -o-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet); 
  /* Firefox 3.6 - 15 */ 
  background: -moz-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet); 
 /* 標準的語法 */ 
  background: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet); 
}

使用透明度（Transparency）

CSS3 漸變也支持透明度（transparency）爽茴，可用于創(chuàng)建減弱變淡的效果。

為了添加透明度绰垂，我們使用 rgba() 函數(shù)來定義顏色結點室奏。rgba() 函數(shù)中的最后一個參數(shù)可以是從 0 到 1 的值，它定義了顏色的透明度：0 表示完全透明劲装，1 表示完全不透明

從左邊開始的線性漸變胧沫。起點是完全透明，慢慢過渡到完全不透明的紅色

#grad { 
  background: -webkit-linear-gradient(left,rgba(255,0,0,0),rgba(255,0,0,1)); /* Safari 5.1 - 6 */ 
  background: -o-linear-gradient(right,rgba(255,0,0,0),rgba(255,0,0,1)); /* Opera 11.1 - 12*/ 
  background: -moz-linear-gradient(right,rgba(255,0,0,0),rgba(255,0,0,1)); /* Firefox 3.6 - 15*/ 
  background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1)); /* 標準的語法 */ 
}

repeating-linear-gradient() 函數(shù)用于重復線性漸變

#grad { 
  /* Safari 5.1 - 6.0 */ 
  background: -webkit-repeating-linear-gradient(red, yellow 10%, green 20%); 
  /* Opera 11.1 - 12.0 */ 
  background: -o-repeating-linear-gradient(red, yellow 10%, green 20%); 
  /* Firefox 3.6 - 15 */ 
  background: -moz-repeating-linear-gradient(red, yellow 10%, green 20%); 
  /* 標準的語法 */ 
  background: repeating-linear-gradient(red, yellow 10%, green 20%); 
}

4.3.3 角度漸變

角度漸變：屬于線性漸變占业，如果你想要在漸變的方向上做更多的控制绒怨，你可以定義一個角度，而不用預定義方向（to bottom谦疾、to top南蹂、to right、to left念恍、to bottom right六剥，等等）

4.3.3.1 語法

角度是指水平線和漸變線之間的角度，逆時針方向計算峰伙。換句話說疗疟，0deg 將創(chuàng)建一個從下到上的漸變，90deg 將創(chuàng)建一個從左到右的漸變

background: linear-gradient(angle, color-stop1, color-stop2);

注意：很多瀏覽器(Chrome,Safari,fiefox等)的使用了舊的標準瞳氓，即 0deg 將創(chuàng)建一個從下到上的漸變策彤，90deg 將創(chuàng)建一個從左到右的漸變。換算公式 90 - x = y 其中 x 為標準角度顿膨，y為非標準角度

4.3.3.2 例子

帶有指定的角度的線性漸變

#grad { 
  background: -webkit-linear-gradient(180deg, red, blue); /* Safari 5.1 - 6.0 */ 
  background: -o-linear-gradient(180deg, red, blue); /* Opera 11.1 - 12.0 */ 
  background: -moz-linear-gradient(180deg, red, blue); /* Firefox 3.6 - 15 */ 
  background: linear-gradient(180deg, red, blue); /* 標準的語法 */ 
}

4.4 CSS3徑向漸變

說明：我這里是參照 W3C 總結的锅锨，發(fā)現(xiàn)了幾篇更為詳細的文檔叽赊，這里推薦一下：

• CSS3 Gradient
• 再說CSS3漸變——線性漸變
• 再說CSS3漸變——徑向漸變
• 神奇的 conic-gradient 圓錐漸變

為了創(chuàng)建一個徑向漸變恋沃，你也必須至少定義兩種顏色結點。顏色結點即你想要呈現(xiàn)平穩(wěn)過渡的顏色

4.4.1 語法

radial-gradient

可以指定漸變的中心必指、形狀（圓形或橢圓形）囊咏、大小。默認情況下塔橡，漸變的中心是 center（表示在中心點）梅割，漸變的形狀是 ellipse（表示橢圓形），漸變的大小是 farthest-corner（表示到最遠的角落）

background: radial-gradient(center, shape size, start-color, ..., last-color)
// 漸變的中心葛家、形狀（圓形或橢圓形）户辞、大小

Radial gradient

4.4.2 例子

顏色結點均勻分布的徑向漸變

#grad { 
  background: -webkit-radial-gradient(red, green, blue); /* Safari 5.1 - 6.0 */ 
  background: -o-radial-gradient(red, green, blue); /* Opera 11.6 - 12.0 */ 
  background: -moz-radial-gradient(red, green, blue); /* Firefox 3.6 - 15 */ 
  background: radial-gradient(red, green, blue); /* 標準的語法 */ 
}

顏色結點不均勻分布的徑向漸變

#grad { 
  background: -webkit-radial-gradient(red 5%, green 15%, blue 60%); /* Safari 5.1 - 6.0 */ 
  background: -o-radial-gradient(red 5%, green 15%, blue 60%); /* Opera 11.6 - 12.0 */ 
  background: -moz-radial-gradient(red 5%, green 15%, blue 60%); /* Firefox 3.6 - 15 */ 
  background: radial-gradient(red 5%, green 15%, blue 60%); /* 標準的語法 */ 
}

4.4.3 設置形狀

shape 參數(shù)定義了形狀。它可以是值 circle 或 ellipse癞谒。其中底燎，circle 表示圓形刃榨，ellipse 表示橢圓形。默認值是 ellipse

形狀為圓形的徑向漸變

#grad { 
  background: -webkit-radial-gradient(circle, red, yellow, green); /* Safari 5.1 - 6.0 */ 
  background: -o-radial-gradient(circle, red, yellow, green); /* Opera 11.6 - 12.0 */ 
  background: -moz-radial-gradient(circle, red, yellow, green); /* Firefox 3.6 - 15 */ 
  background: radial-gradient(circle, red, yellow, green); /* 標準的語法 */ 
}

4.4.4 不同尺寸大小關鍵字的使用

size 參數(shù)定義了漸變的大小双仍。它可以是以下四個值:

• closest-side
• farthest-side
• closest-corner
• farthest-corner

不同尺寸大小關鍵字的徑向漸變

#grad1 { 
  /* Safari 5.1 - 6.0 */ 
  background: -webkit-radial-gradient(60% 55%, closest-side,blue,green,yellow,black); 
  /* Opera 11.6 - 12.0 */ 
 background: -o-radial-gradient(60% 55%, closest-side,blue,green,yellow,black); 
 /* Firefox 3.6 - 15 */ 
  background: -moz-radial-gradient(60% 55%, closest-side,blue,green,yellow,black); 
  /* 標準的語法 */ 
 background: radial-gradient(60% 55%, closest-side,blue,green,yellow,black); 
} 

#grad2 { 
 /* Safari 5.1 - 6.0 */ 
  background: -webkit-radial-gradient(60% 55%, farthest-side,blue,green,yellow,black); 
 /* Opera 11.6 - 12.0 */ 
  background: -o-radial-gradient(60% 55%, farthest-side,blue,green,yellow,black); 
  /* Firefox 3.6 - 15 */ 
 background: -moz-radial-gradient(60% 55%, farthest-side,blue,green,yellow,black); 
 /* 標準的語法 */ 
  background: radial-gradient(60% 55%, farthest-side,blue,green,yellow,black); 
}

4.4.5 重復的徑向漸變

repeating-radial-gradient() 函數(shù)用于重復徑向漸變

#grad { 
  /* Safari 5.1 - 6.0 */ 
  background: -webkit-repeating-radial-gradient(red, yellow 10%, green 15%); 
  /* Opera 11.6 - 12.0 */ 
  background: -o-repeating-radial-gradient(red, yellow 10%, green 15%); 
  /* Firefox 3.6 - 15 */ 
  background: -moz-repeating-radial-gradient(red, yellow 10%, green 15%); 
  /* 標準的語法 */ 
  background: repeating-radial-gradient(red, yellow 10%, green 15%); 
}

5 CSS3文本效果

CSS3中包含幾個新的文本特征

5.1 屬性

• text-shadow
• box-shadow
• text-overflow
• word-wrap
• word-break

5.2 兼容性

瀏覽器支持

5.3 CSS3文本陰影

CSS3中枢希，text-shadow 屬性適用于文本陰影

Text shadow effect!

5.3.1 語法

text-shadow: 水平陰影，垂直陰影朱沃，模糊的距離苞轿，陰影的顏色

5.3.2 例子

給標題添加陰影

h1{
    text-shadow: 5px 5px 5px #FF0000;
}

5.3.3 CSS3盒子陰影

CSS3 中 box-shadow 屬性適用于盒子陰影

5.3.4 語法

box-shadow: x軸偏移 y軸偏移 模糊距離 陰影顏色

5.3.5 例子

div { box-shadow: 10px 10px 5px yellow;}

也可以在 ::before 和 ::after 兩個偽元素中添加陰影效果

#boxshadow { 
    position: relative; 
    box-shadow: 1px 2px 4px rgba(0, 0, 0, .5); 
    padding: 10px; bac kground: white;
} 
#boxshadow img { 
    width: 100%; 
    border: 1px solid #8a4419; 
    border-style: inset;
} 
#boxshadow::after { 
    content: ''; 
    position: absolute; 
    z-index: -1; /* hide shadow behind image */ 
    box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3); 
    width: 70%; 
    left: 15%; /* one half of the remaining 30% */ 
    height: 100px; 
    bottom: 0;
}

文字卡片效果

div.card { 
    width: 250px; 
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); 
    text-align: center;
}

5.4 CSS3溢出內(nèi)容效果

CSS3文本溢出屬性Text Overflow指定應向用戶如何顯示溢出內(nèi)容

5.4.1 語法

clip： 修剪文本

ellipsis：顯示省略符號來代表被修剪的文本

string：使用給定的字符串來代表被修剪的文本

text-overflow: clip|ellipsis|string;

5.4.2 例子

帶有 hover 效果的 Text-overflow

<!DOCTYPE html>
<html>
<head>
<style> 
div.test
{
white-space:nowrap; 
width:12em; 
overflow:hidden; 
border:1px solid #000000;
}

div.test:hover
{
text-overflow:inherit;
overflow:visible;
}
</style>

</head>

<body>

<p>如果您把光標移動到下面兩個 div 上，就能夠看到全部文本逗物。</p>

<p>這個 div 使用 "text-overflow:ellipsis" ：</p>

<div class="test" style="text-overflow:ellipsis;">This is some long text that will not fit in the box</div>

<p>這個 div 使用 "text-overflow:clip"：</p>

<div class="test" style="text-overflow:clip;">This is some long text that will not fit in the box</div>

</body>
</html>

5.5 CSS3換行

word-wrap自動換行屬性允許您強制文本換行 - 即使這意味著分裂它中間的一個字

5.5.1 語法

normal：只在允許的斷字點換行（瀏覽器保持默認處理）

break-word：在長單詞或 URL 地址內(nèi)部進行換行

word-wrap: normal|break-word;

5.5.2 例子

允許長文本換行

p {word-wrap: break-word;}

5.6 CSS3單詞拆分行

CSS3 單詞拆分換行屬性word-break指定換行規(guī)則

5.6.1 語法

normal：使用瀏覽器默認的換行規(guī)則

break-all：允許在單詞內(nèi)換行

keep-all：只能在半角空格或連字符處換行

word-break: normal|break-all|keep-all;

5.6.2 例子

p.test1 { 
    word-break: keep-all;
} 
p.test2 { 
    word-break: break-all;
}

5.7 CSS其他文本屬性

內(nèi)容來自菜鳥教程

6 CSS3字體

通過CSS3缴阎，web設計師可以使用他們喜歡的任意字體

With CSS3, web designers are no longer forced to use only web-safe fonts

6.1 屬性

當您找到或購買到希望使用的字體時允瞧，可將該字體文件存放到web服務器上，它會在需要時被自動下載到用戶的計算機上

• @font-face

6.2 兼容性

表格中的數(shù)字表示支持該屬性的第一個瀏覽器版本號蛮拔。

• Internet Explorer 9+, Firefox, Chrome, Safari, 和 Opera 支持 WOFF (Web Open Font Format) 字體.

• Firefox, Chrome, Safari, 和 Opera 支持 .ttf(True Type字體)和.otf(OpenType)字體字體類型）述暂。

• Chrome, Safari 和 Opera 也支持 SVG 字體/折疊.

• Internet Explorer 同樣支持 EOT (Embedded OpenType) 字體.

• 需要注意的是： Internet Explorer 8 以及更早的版本不支持新的 @font-face 規(guī)則。

6.3 CSS3設置字體

CSS3中用@font-face屬性來設置自己喜歡的字體

6.3.1 語法

在新的 @font-face 規(guī)則中建炫，您必須首先定義字體的名稱（比如 myFirstFont）畦韭，然后指向該字體文件

6.3.2 例子

@font-face
{
   font-family: myFirstFont;
   src: url(sansation_light.woff);
}

div
{
   font-family:myFirstFont;
}

6.3.3 CSS3 字體描述

下表列出了所有的字體描述和里面的@font-face規(guī)則定義

說明：表格來源于 W3C

7 CSS3 2D 轉換

可以移動，比例化茂蚓，反過來壕鹉，旋轉，和拉伸元素

img

7.1 屬性

• transform
• transform-origin

7.2 方法

• translate()
• rotate()
• scale()
• skew()
• matrix()

7.3 兼容性

表格中的數(shù)字表示支持該屬性的第一個瀏覽器版本號

緊跟在 -webkit-, -ms- 或 -moz- 前的數(shù)字為支持該前綴屬性的第一個瀏覽器版本號

Internet Explorer 10, Firefox, 和 Opera支持transform 屬性.

Chrome 和 Safari 要求前綴 -webkit- 版本.

注意： Internet Explorer 9 要求前綴 -ms- 版本.

7.4 translate()

移動

translate()方法聋涨，根據(jù)左(X軸)和頂部(Y軸)位置給定的參數(shù)晾浴，從當前元素位置移動

img

7.4.1 語法

transform: translate(x軸移動距離, y軸移動距離) // 原點在左上角

7.4.2 案例

translate值（50px，100px）是從左邊元素移動50個像素牍白，并從頂部移動100像素

div { 
    transform: translate(50px,100px); 
    -ms-transform: translate(50px,100px); /* IE 9 */ 
    -webkit-transform: translate(50px,100px); /* Safari and Chrome */ 
}

7.5 rotate()

旋轉脊凰，旋轉過后，原點會跟著變化

rotate()方法茂腥，在一個給定度數(shù)順時針旋轉的元素狸涌。負值是允許的，這樣是元素逆時針旋轉

img

7.5.1 語法

transform: rotate(angle) // 括號內(nèi)填寫旋轉角度

7.5.2 例子

rotate值（30deg）元素順時針旋轉30度

div { 
    transform: rotate(30deg); 
    -ms-transform: rotate(30deg); /* IE 9 */ 
    -webkit-transform: rotate(30deg); /* Safari and Chrome */ 
}  

7.6 scale()

縮放

scale()方法最岗，該元素增加或減少的大小帕胆，取決于寬度（X軸）和高度（Y軸）的參數(shù)

img

7.6.1 語法

transform: scale(寬度的倍數(shù), 高度的倍數(shù))

7.6.2 例子

scale（2,4）轉變寬度為原來的大小的2倍，和其原始大小4倍的高度

div 
{ 
    transform: scale(2,4); 
    -ms-transform: scale(2,4); /* IE 9 */ 
    -webkit-transform: scale(2,4); /* Safari and Chrome */ 
}  

7.7 skew()

CSS3 傾斜

包含兩個參數(shù)值般渡，分別表示X軸和Y軸傾斜的角度懒豹，如果第二個參數(shù)為空，則默認為0驯用，參數(shù)為負表示向相反方向傾斜

7.7.1 語法

• skewX( );表示只在X軸(水平方向)傾斜脸秽。
• skewY( );表示只在Y軸(垂直方向)傾斜。

transform: skew(相對于x軸角度, 相對于y軸角度)

7.7.2 例子

skew(30deg,20deg) 是元素在X軸和Y軸上傾斜30度20度

此處 W3C 上教程有誤蝴乔，他寫的是 skew(30deg,20deg) 是元素在X軸和Y軸上傾斜20度30度

W3Cskew

div { 
    transform: skew(30deg,20deg); 
    -ms-transform: skew(30deg,20deg); /* IE 9 */ 
    -webkit-transform: skew(30deg,20deg); /* Safari and Chrome */ 
}  

7.8 matrix()

CSS3 矩陣记餐，反正我用得少

matrix()方法將2D變換方法合并成一個

img

7.8.1 語法

transform: matrix(旋轉角度, 縮放比例, 移動, 傾斜)

7.8.2 例子

利用matrix()方法旋轉div元素30°

div 
{ 
    transform:matrix(0.866,0.5,-0.5,0.866,0,0); 
    -ms-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* IE 9 */ 
    -webkit-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Safari and Chrome */ 
} 

8 CSS3 3D轉換

CSS3 允許您使用 3D 轉換來對元素進行格式化

8.1 兼容性

表格中的數(shù)字表示支持該屬性的第一個瀏覽器版本號

緊跟在 -webkit-, -ms- 或 -moz- 前的數(shù)字為支持該前綴屬性的第一個瀏覽器版本號

8.2 rotateX()

Rotate X

8.2.1 例子

rotateX()方法，圍繞其在一個給定度數(shù)X軸旋轉的元素

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>W3C(w3cschool.cn)</title> 
<style> 
div
{
    width:100px;
    height:75px;
    background-color:red;
    border:1px solid black;
}
div#div2
{
    transform:rotateX(120deg);
    -webkit-transform:rotateX(120deg); /* Safari and Chrome */
}
</style>
</head>
<body>
<p><b>注意:</b> Internet Explorer 9 (以及更早版本的瀏覽器) 和 Opera 不支持 rotateX 方法.</p>
<div>Hello. This is a DIV element.</div>
<div id="div2">Hello. This is a DIV element.</div>
</body>
</html>

8.3 rotateY()

Rotate Y

8.3.1 例子

rotateY()方法淘这，圍繞其在一個給定度數(shù)Y軸旋轉的元素

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>W3C(w3cschool.cn)</title> 
<style> 
div
{
    width:100px;
    height:75px;
    background-color:red;
    border:1px solid black;
}
div#div2
{
    transform:rotateY(130deg);
    -webkit-transform:rotateY(130deg); /* Safari and Chrome */
}
</style>
</head>
<body>
<p><b>注意:</b> Internet Explorer 9 (以及更早版本的瀏覽器) 和 Opera 不支持 rotateY方法.</p>
<div>Hello. This is a DIV element.</div>
<div id="div2">Hello. This is a DIV element.</div>
</body>
</html>

8.4 CSS3 轉換屬性

下表列出了CSS3所有的轉換屬性

8.5 CSS3 3D 轉換方法

類似于 CSS3 2D 轉換方法的使用

9 CSS3 過渡

CSS3中乃正，我們?yōu)榱颂砑幽撤N效果可以從一種樣式轉變到另一個的時候，無需使用Flash動畫或JavaScript

9.1 屬性

9.2 兼容性

表格中的數(shù)字表示支持該屬性的第一個瀏覽器版本號

緊跟在 -webkit-, -ms- 或 -moz- 前的數(shù)字為支持該前綴屬性的第一個瀏覽器版本號

9.3 transition

9.3.1 語法

transition需要配合一個變化的屬性進行

div:hover {
    width: 300px;
}
div {
    transition: 指定需要變化的屬性（例如width）,完成時間, 轉速曲線, 延遲執(zhí)行的時間 
}

9.3.2 例子

指定當鼠標經(jīng)過 div 的 1s 之后 , div 的 width 在 1 秒時間內(nèi)岸晦，勻速變化為 300 px

div:hover {
    width: 300px;
}
div {
    transition: width 1s linear 1s;
}

拆分寫法

div:hover {
    width: 300px;
}

div { 
    transition-property: width; 
    transition-duration: 1s; 
    transition-timing-function: linear; 
    transition-delay: 1s; 
    /* Safari */ 
    -webkit-transition-property: width; 
    -webkit-transition-duration: 1s; 
    -webkit-transition-timing-function: linear; 
    -webkit-transition-delay: 1s; 
}

注：這里看到了一篇很棒的文檔欧啤，推薦一下CSS3過渡和動畫

10 CSS3 動畫

CSS3，我們可以創(chuàng)建動畫启上，它可以取代許多網(wǎng)頁動畫圖像邢隧，F(xiàn)lash動畫，和JAVAScripts

10.1 屬性

• @keyframes
• animation

10.2 兼容性

Internet Explorer 10冈在、Firefox 以及 Opera 支持 @keyframes 規(guī)則和 animation 屬性

緊跟在 -webkit-, -ms- 或 -moz- 前的數(shù)字為支持該前綴屬性的第一個瀏覽器版本號

10.3 語法

@keyframes 和 animation 一般配合使用倒慧，使用 @keyframes 定義一個動畫，使用 animation 去執(zhí)行這個動畫

10.4 例子

必須定義動畫的名稱和動畫的持續(xù)時間。如果省略的持續(xù)時間纫谅，動畫將無法運行炫贤，因為默認值是0

@keyframes myfirst
{
    from {background: red;}
    to {background: yellow;}
}

@-webkit-keyframes myfirst /* Safari and Chrome */
{
    from {background: red;}
    to {background: yellow;}
}

div {
    animation: myfirst 5s;
    -webkit-animation: myfirst 5s; /* Safari and Chrome */
}  

可以以百分比指定動畫發(fā)生時間

為了得到最佳的瀏覽器支持，您應該始終定義 0% 和 100% 選擇器

當動畫為 25% 及 50% 時改變背景色付秕，然后當動畫 100% 完成時再次改變

@keyframes myfirst
{
    0%   {background: red;}
    25%  {background: yellow;}
    50%  {background: blue;}
    100% {background: green;}
}

@-webkit-keyframes myfirst /* Safari and Chrome */
{
    0%   {background: red;}
    25%  {background: yellow;}
    50%  {background: blue;}
    100% {background: green;}
}

div {
    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;}
}

div {
    animation: myfirst 5s;
    -webkit-animation: myfirst 5s; /* Safari and Chrome */
}  

10.5 CSS3的動畫屬性

下面的表格列出了 @keyframes 規(guī)則和所有動畫屬性

運行myfirst動畫，設置所有的屬性

div {
    animation-name: myfirst;
    animation-duration: 5s;
    animation-timing-function: linear;
    animation-delay: 2s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-play-state: running;
/* Safari and Chrome: */
    -webkit-animation-name: myfirst;
    -webkit-animation-duration: 5s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-delay: 2s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: alternate;
    -webkit-animation-play-state: running;
}

與上面的動畫相同吼驶，但是使用了簡寫的動畫 animation 屬性

div {
    animation: myfirst 5s linear 2s infinite alternate;
    /* Safari and Chrome: */
    -webkit-animation: myfirst 5s linear 2s infinite alternate;
}

11 CSS3 彈性盒子(Flex Box)

詳見Flex布局

12 CSS3用戶界面

在 CSS3 中, 增加了一些新的用戶界面特性來調(diào)整元素尺寸惩激，框尺寸和外邊框

12.1 屬性

• resize
• box-sizing
• outline-offset

12.2 兼容性

表格中的數(shù)字表示支持該屬性的第一個瀏覽器版本號

緊跟在 -webkit-, -ms- 或 -moz- 前的數(shù)字為支持該前綴屬性的第一個瀏覽器版本號

12.3 CSS3 調(diào)整尺寸

CSS3中，resize屬性指定一個元素是否應該由用戶去調(diào)整大小

12.3.1 語法

resize屬性指定一個元素是否是由用戶調(diào)整大小的

resize: none|both|horizontal|vertical

12.3.2 例子

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>W3Cschool教程(w3cschool.cn)</title>
<style> 
div
{
    border:2px solid;
    padding:10px 40px; 
    width:300px;
    resize:both;
    overflow:auto;
}
</style>
</head>
<body>

<p><b>注意:</b> Firefox, Safari,和 Chrome 兼容 resize 屬性.</p>

<div>The resize property specifies whether or not an element is resizable by the user.</div>

</body>
</html>

12.4 CSS3 方框大小調(diào)整

box-sizing 屬性允許您以確切的方式定義適應某個區(qū)域的具體內(nèi)容

簡單來說就是當需要考慮 width 或者 height 包不包括 padding 和 border 的時候可以考慮使用 box-sizing

例如：box-sizing:border-box的時候骡技，邊框和padding包含在元素的寬高之內(nèi)

12.4.1 語法

box-sizing: content-box|border-box|inherit

12.4.2 例子

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>W3Cschool教程(w3cschool.cn)</title>
<style> 
div.container
{
    width:30em;
    border:1em solid;
}
div.box
{
    box-sizing:border-box;
    -moz-box-sizing:border-box; /* Firefox */
    width:50%;
    border:1em solid red;
    float:left;
}
</style>
</head>
<body>

<div class="container">
<div class="box">This div occupies the left half.</div>
<div class="box">This div occupies the right half.</div>
</div>

</body>
</html>

12.5 CSS3 外形修飾

簡單來說就是在邊框 border 外面又加了一層 outline-offset

輪廓與邊框有兩點不同：

• 輪廓不占用空間
• 輪廓可能是非矩形

12.5.1 語法

outline-offset: length|inherit

12.5.2 例子

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>W3Cschool教程(w3cschool.cn)</title>
<style> 
div
{
    margin:20px;
    width:150px; 
    padding:10px;
    height:70px;
    border:2px solid black;
    outline:2px solid red;
    outline-offset:15px;
} 
</style>
</head>
<body>

<p><b>注意:</b> Internet Explorer 不兼容 outline-offset屬性.</p>

<div>這個 div有一個輪廓邊界15 px邊境外的邊緣右遭。</div>

</body>
</html>

13 CSS3 媒體查詢

媒體查詢很多就是用來進行響應式開發(fā)了

13.1 兼容性

13.2 @media

13.2.1 語法

@media 媒體類型 and (條件) {
    
}

13.2.2 例子

利用媒體查詢做響應式布局開發(fā)：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title></title> 
<style>
body {
    background-color: pink;
}
@media screen and (max-width: 960px) {
    body {
        background-color: darkgoldenrod;
    }
}
@media screen and (max-width: 480px) {
    body {
        background-color: lightgreen;
    }
}
</style>
</head>
<body>

<h1>重置瀏覽器窗口查看效果做盅！</h1>
<p>如果媒體類型屏幕的可視窗口寬度小于 960 px 缤削，背景顏色將改變。</p>
<p>如果媒體類型屏幕的可視窗口寬度小于 480 px ，背景顏色將改變肌厨。</p>

</body>
</html>

14 參考文章

本文參考 W3C CSS3 教程墨状、菜鳥教程等，詳細移步 W3C 或菜鳥教程