CSS3 整理
CSS3 入門
CSS 用于控制網頁的樣式和布局。
CSS3 是最新的 CSS 標準。
本教程向您講解 CSS3 中的新特性。
層疊樣式表(英文全稱：Cascading Style Sheets)是一種用來表現HTML（標準通用標記語言的一個應用）或XML（標準通用標記語言的一個子集）等文件樣式的計算機語言。CSS不僅可以靜態地修飾網頁，還可以配合各種腳本語言動態地對網頁各元素進行格式化。。
CSS3 簡介
CSS3 簡介
對CSS3已完全向后兼容，所以你就不必改變現有的設計。瀏覽器將永遠支持CSS2。
CSS3 模塊
CSS3被拆分為”模塊”。舊規范已拆分成小塊，還增加了新的。
一些最重要CSS3模塊如下：
- 選擇器
- 盒模型
- 背景和邊框
- 文字特效
- 2D/3D轉換
- 動畫
- 多列布局
- 用戶界面
CSS3 建議
W3C的CSS3規范仍在開發。
但是，許多新的CSS3屬性已在現代瀏覽器使用。
CSS3 邊框
CSS3 邊框
用 CSS3，你可以創建圓角邊框，添加陰影框，并作為邊界的形象而不使用設計程序，如 Photoshop。
在本章中，您將了解以下的邊框屬性：
- border-radius
- box-shadow
- border-image
CSS3 圓角
在 CSS2 中添加圓角棘手。我們不得不在每個角落使用不同的圖像。
在 CSS3 中，很容易創建圓角。
在 CSS3 中 border-radius 屬性被用于創建圓角：
這是圓角邊框！
div {border:2px solid;border-radius:25px; }CSS3 盒陰影
CSS3 中的 box-shadow 屬性被用來添加陰影:
在div中添加box-shadow屬性
div{ box-shadow: 10px 10px 5px #888888;}CSS3 邊界圖片
有了 CSS3 的 border-image 屬性，你可以使用圖像創建一個邊框：
border-image 屬性允許你指定一個圖片作為邊框！ 用于創建上文邊框的原始圖像：
在 div 中使用圖片創建邊框:
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-image | 設置所有邊框圖像的速記屬性。 | 3 |
| border-radius | 一個用于設置所有四個邊框- *-半徑屬性的速記屬性 | 3 |
| box-shadow | 附加一個或多個下拉框的陰影 | 3 |
CSS3 圓角
CSS3 圓角
使用 CSS3 border-radius 屬性，你可以給任何元素制作 “圓角”。
瀏覽器支持
表格中的數字表示支持該屬性的第一個瀏覽器的版本號。
-webkit- 或 -moz- 前面的數字表示支持該前綴的第一個版本。
| border-radius | 9.0 | 5.0 4.0 -webkit- | 4.0 3.0 -moz- | 5.0 3.1 -webkit- | 10.5 |
CSS3 border-radius 屬性
使用 CSS3 border-radius 屬性，你可以給任何元素制作 “圓角”。
CSS3 border-radius - 指定每個圓角
如果你在 border-radius 屬性中只指定一個值，那么將生成 4 個 圓角。
但是，如果你要在四個角上一一指定，可以使用以下規則：
- 四個值: 第一個值為左上角，第二個值為右上角，第三個值為右下角，第四個值為左下角。
- 三個值: 第一個值為左上角, 第二個值為右上角和左下角，第三個值為右下角
- 兩個值: 第一個值為左上角與右下角，第二個值為右上角與左下角
- 一個值： 四個圓角值相同
CSS3 圓角屬性
| border-radius | 所有四個邊角 border---radius 屬性的縮寫 |
| border-top-left-radius | 定義了左上角的弧度 |
| border-top-right-radius | 定義了右上角的弧度 |
| border-bottom-right-radius | 定義了右下角的弧度 |
| border-bottom-left-radius | 定義了左下角的弧度 |
CSS3 背景
CSS3 背景
CSS3中包含幾個新的背景屬性，提供更大背景元素控制。
在本章您將了解以下背景屬性：
- background-image
- background-size
- background-origin
- background-clip
您還將學習如何使用多重背景圖像。
瀏覽器支持
表格中的數字表示支持該屬性的第一個瀏覽器版本號。
緊跟在 -webkit-, -ms- 或 -moz- 前的數字為支持該前綴屬性的第一個瀏覽器版本號。
| background-image (with multiple backgrounds) | 4.0 | 9.0 | 3.6 | 3.1 | 11.5 |
| background-size | 4.0 1.0 -webkit- | 9.0 | 4.0 3.6 -moz- | 4.1 3.0 -webkit- | 10.5 10.0 -o- |
| background-origin | 1.0 | 9.0 | 4.0 | 3.0 | 10.5 |
| background-clip | 4.0 | 9.0 | 4.0 | 3.0 | 10.5 |
CSS3 background-image屬性
CSS3中可以通過background-image屬性添加背景圖片。
不同的背景圖像和圖像用逗號隔開，所有的圖片中顯示在最頂端的為第一張。
#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; }CSS3 background-size 屬性
background-size指定背景圖像的大小。CSS3以前，背景圖像大小由圖像的實際大小決定。
CSS3中可以指定背景圖片，讓我們重新在不同的環境中指定背景圖片的大小。您可以指定像素或百分比大小。
你指定的大小是相對于父元素的寬度和高度的百分比的大小。
重置背景圖像：
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; }CSS3的background-Origin屬性
background-Origin屬性指定了背景圖像的位置區域。
content-box, padding-box,和 border-box區域內可以放置背景圖像。
在 content-box 中定位背景圖片：
div {background:url(img_flwr.gif);background-repeat:no-repeat;background-size:100% 100%;background-origin:content-box; }CSS3 多個背景圖像
CSS3 允許你在元素上添加多個背景圖像。
在 body 元素中設置兩個背景圖像：
body { background-image:url(img_flwr.gif),url(img_tree.gif); }CSS3 background-clip屬性
CSS3中background-clip背景剪裁屬性是從指定位置開始繪制。
#example1 { border: 10px dotted black; padding: 35px; background: yellow; background-clip: content-box; }新的背景屬性
| background-clip | 規定背景的繪制區域。 | 3 |
| background-origin | 規定背景圖片的定位區域。 | 3 |
| background-size | 規定背景圖片的尺寸。 | 3 |
CSS3 漸變（Gradients）
CSS3 漸變（Gradients）
CSS3 漸變（gradients）可以讓你在兩個或多個指定的顏色之間顯示平穩的過渡。
以前，你必須使用圖像來實現這些效果。但是，通過使用 CSS3 漸變（gradients），你可以減少下載的時間和寬帶的使用。此外，漸變效果的元素在放大時看起來效果更好，因為漸變（gradient）是由瀏覽器生成的。
CSS3 定義了兩種類型的漸變（gradients）：
- 線性漸變（Linear Gradients）- 向下/向上/向左/向右/對角方向
- 徑向漸變（Radial Gradients）- 由它們的中心定義
瀏覽器支持
表中的數字指定了完全支持該屬性的第一個瀏覽器版本。
后邊跟 -webkit-、-moz- 或 -o- 的數字指定了需加上前綴才能支持屬性的第一個版本。
| linear-gradient | 10.0 | 26.0 10.0 -webkit- | 16.0 3.6 -moz- | 6.1 5.1 -webkit- | 12.1 11.1 -o- |
| radial-gradient | 10.0 | 26.0 10.0 -webkit- | 16.0 3.6 -moz- | 6.1 5.1 -webkit- | 12.1 11.6 -o- |
| repeating-linear-gradient | 10.0 | 26.0 10.0 -webkit- | 16.0 3.6 -moz- | 6.1 5.1 -webkit- | 12.1 11.1 -o- |
| repeating-radial-gradient | 10.0 | 26.0 10.0 -webkit- | 16.0 3.6 -moz- | 6.1 5.1 -webkit- | 12.1 11.6 -o- |
CSS3 線性漸變
為了創建一個線性漸變，你必須至少定義兩種顏色結點。顏色結點即你想要呈現平穩過渡的顏色。同時，你也可以設置一個起點和一個方向（或一個角度）。
語法
background: linear-gradient(direction, color-stop1, color-stop2, ...);線性漸變 - 從上到下（默認情況下）
下面的實例演示了從頂部開始的線性漸變。起點是紅色，慢慢過渡到藍色：
從上到下的線性漸變：
#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); /* 標準的語法 */ }使用角度
如果你想要在漸變的方向上做更多的控制，你可以定義一個角度，而不用預定義方向（to bottom、to top、to right、to left、to bottom right，等等）。
語法
background: linear-gradient(angle, color-stop1, color-stop2);角度是指水平線和漸變線之間的角度，逆時針方向計算。換句話說，0deg 將創建一個從下到上的漸變，90deg 將創建一個從左到右的漸變。
但是，請注意很多瀏覽器(Chrome,Safari,fiefox等)的使用了舊的標準，即 0deg 將創建一個從左到右的漸變，90deg 將創建一個從下到上的漸變。換算公式 90 - x = y 其中 x 為標準角度，y為非標準角度。
下面的實例演示了如何在線性漸變上使用角度：
帶有指定的角度的線性漸變：
#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); /* 標準的語法 */ }使用多個顏色結點
下面的實例演示了如何設置多個顏色結點：
帶有多個顏色結點的從上到下的線性漸變：
#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); }使用透明度（transparent）
CSS3 漸變也支持透明度（transparent），可用于創建減弱變淡的效果。
為了添加透明度，我們使用 rgba() 函數來定義顏色結點。rgba() 函數中的最后一個參數可以是從 0 到 1 的值，它定義了顏色的透明度：0 表示完全透明，1 表示完全不透明。
下面的實例演示了從左邊開始的線性漸變。起點是完全透明，慢慢過渡到完全不透明的紅色：
從左到右的線性漸變，帶有透明度：
#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); }重復的線性漸變
repeating-linear-gradient() 函數用于重復線性漸變：
一個重復的線性漸變：
#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%); }CSS3 徑向漸變
徑向漸變由它的中心定義。
為了創建一個徑向漸變，你也必須至少定義兩種顏色結點。顏色結點即你想要呈現平穩過渡的顏色。同時，你也可以指定漸變的中心、形狀（圓形或橢圓形）、大小。默認情況下，漸變的中心是 center（表示在中心點），漸變的形狀是 ellipse（表示橢圓形），漸變的大小是 farthest-corner（表示到最遠的角落）。
語法
#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, 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%); /* 標準的語法 */ }*/}設置形狀
shape 參數定義了形狀。它可以是值 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); /* 標準的語法 */ }不同尺寸大小關鍵字的使用
size 參數定義了漸變的大小。它可以是以下四個值：
- 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); }重復的徑向漸變
repeating-radial-gradient() 函數用于重復徑向漸變：
一個重復的徑向漸變：
repeating-radial-gradient() 函數用于重復徑向漸變：
#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%); }CSS3 文本效果
CSS3 文本效果
CSS3中包含幾個新的文本特征。
在本章中您將了解以下文本屬性：
- text-shadow
- box-shadow
- text-overflow
- word-wrap
- word-break
瀏覽器支持
| text-shadow | 4.0 | 10.0 | 3.5 | 4.0 | 9.5 |
| box-shadow | 10.0 4.0 -webkit- | 9.0 | 4.0 3.5 -moz- | 5.1 3.1 | |
| -webkit- | 10.5 text-overflow | 4.0 | 6.0 | 7.0 | 3.1 |
| word-wrap | 23.0 | 5.5 | 3.5 | 6.1 | 12.1 |
| word-break | 4.0 | 5.5 | 15.0 | 3.1 | 15.0 |
CSS3 的文本陰影
CSS3 中，text-shadow屬性適用于文本陰影。
給標題添加陰影:
h1 { text-shadow: 5px 5px 5px #FF0000;}CSS3 box-shadow屬性
CSS3 中 CSS3 box-shadow 屬性適用于盒子陰影
div { box-shadow: 10px 10px 5px #888888;}接下來給陰影添加顏色
div { box-shadow: 10px 10px grey;}接下來給陰影添加一個模糊效果
div { box-shadow: 10px 10px 5px grey;}你也可以在 ::before 和 ::after 兩個偽元素中添加陰影效果
#boxshadow {position: relative;b ox-shadow: 1px 2px 4px rgba(0, 0, 0, .5);pa dding: 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; }CSS3 Text Overflow屬性
CSS3文本溢出屬性指定應向用戶如何顯示溢出內容
p.test1 {white-space: nowrap; width: 200px; border: 1px solid #000000;overflow: hidden;text-overflow: clip; }p.test2 {white-space: nowrap; width: 200px; border: 1px solid #000000;overflow: hidden;text-overflow: ellipsis; }CSS3的換行
如果某個單詞太長，不適合在一個區域內，它擴展到外面：
CSS3中，自動換行屬性允許您強制文本換行 - 即使這意味著分裂它中間的一個字：
CSS代碼如下：
允許長文本換行:
p {word-wrap:break-word;}CSS3 單詞拆分換行
CSS3 單詞拆分換行屬性指定換行規則：
CSS代碼如下：
p.test1 {word-break: keep-all; }p.test2 {word-break: break-all; }新文本屬性
| hanging-punctuation | 規定標點字符是否位于線框之外。 | 3 |
| punctuation-trim | 規定是否對標點字符進行修剪。 | 3 |
| text-align-last | 設置如何對齊最后一行或緊挨著強制換行符之前的行。 | 3 |
| text-emphasis | 向元素的文本應用重點標記以及重點標記的前景色。 | 3 |
| text-justify | 規定當 text-align 設置為 “justify” 時所使用的對齊方法。 | 3 |
| text-outline | 規定文本的輪廓。 | 3 |
| text-overflow | 規定當文本溢出包含元素時發生的事情。 | 3 |
| text-shadow | 向文本添加陰影。 | 3 |
| text-wrap | 規定文本的換行規則。 | 3 |
| word-break | 規定非中日韓文本的換行規則。 | 3 |
| word-wrap | 允許對長的不可分割的單詞進行分割并換行到下一行。 | 3 |
CSS3 字體
CSS3 @font-face 規則
以前 CSS3 的版本，網頁設計師不得不使用用戶計算機上已經安裝的字體。
使用 CSS3，網頁設計師可以使用他/她喜歡的任何字體。
當你發現您要使用的字體文件時，只需簡單的將字體文件包含在網站中，它會自動下載給需要的用戶。
您所選擇的字體在新的 CSS3 版本有關于 @font-face 規則描述。
您”自己的”的字體是在 CSS3 @font-face 規則中定義的。
瀏覽器支持
表格中的數字表示支持該屬性的第一個瀏覽器版本號。
| @font-face | 4.0 | 9.0 | 3.5 | 3.2 | 10.0 |
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 規則。
使用您需要的字體
在新的 @font-face 規則中，您必須首先定義字體的名稱（比如 myFirstFont），然后指向該字體文件。
**提示：**URL請使用小寫字母的字體，大寫字母在IE中會產生意外的結果
如需為 HTML 元素使用字體，請通過 font-family 屬性來引用字體的名稱 (myFirstFont)：
<style> @font-face{font-family: myFirstFont;src: url(sansation_light.woff);}div{font-family:myFirstFont;} </style>使用粗體文本
您必須添加另一個包含粗體文字的@font-face規則：
@font-face {font-family: myFirstFont;src: url(sansation_bold.woff);font-weight:bold; }該文件”Sansation_Bold.ttf”是另一種字體文件，包含Sansation字體的粗體字。
瀏覽器使用這一文本的字體系列”myFirstFont”時應該呈現為粗體。
這樣你就可以有許多相同的字體@font-face的規則。
CSS3 字體描述
下表列出了所有的字體描述和里面的@font-face規則定義：
| font-family | name | 必需。規定字體的名稱。 |
| src | URL | 必需。定義字體文件的 URL。 |
| font-stretch | normal condensed ultra-condensed extra-condensed semi-condensed expanded semi-expanded extra-expanded ultra-expanded | 可選。定義如何拉伸字體。默認是 “normal”。 |
| font-style | normal italic oblique | 可選。定義字體的樣式。默認是 “normal”。 |
| font-weight | normal bold 100 200 300 400 500 600 700 800 900 | 可選。定義字體的粗細。默認是 “normal”。 |
| unicode-range | unicode-range | 可選。定義字體支持的 UNICODE 字符范圍。默認是 “U+0-10FFFF”。 |
CSS3 2D 轉換
CSS3 轉換
CSS3 轉換可以可以對元素進行移動、縮放、轉動、拉長或拉伸。
它是如何工作？
轉換的效果是讓某個元素改變形狀，大小和位置。
您可以使用 2D 或 3D 轉換來轉換您的元素。
瀏覽器支持
表格中的數字表示支持該屬性的第一個瀏覽器版本號。
緊跟在 -webkit-, -ms- 或 -moz- 前的數字為支持該前綴屬性的第一個瀏覽器版本號。
| transform | 36.0 4.0 -webkit- | 10.0 9.0 -ms- | 16.0 3.5 -moz- | 3.2 -webkit- | 23.0 15.0 -webkit- 12.1 10.5 -o- |
| transform-origin (two-value syntax) | 36.0 4.0 -webkit- | 10.0 9.0 -ms- | 16.0 3.5 -moz- | 3.2 -webkit- | 23.0 15.0 -webkit- 12.1 10.5 -o- |
Internet Explorer 10, Firefox, 和 Opera支持transform 屬性.
Chrome 和 Safari 要求前綴 -webkit- 版本.
注意： Internet Explorer 9 要求前綴 -ms- 版本.
2D 轉換
在本章您將了解2D變換方法：
- translate()
- rotate()
- scale()
- skew()
- matrix()
div {
transform: translate(50px,100px);
-ms-transform: translate(50px,100px); /* IE 9 /
-webkit-transform: translate(50px,100px); / Safari and Chrome */
}
div {
transform: rotate(30deg);
-ms-transform: rotate(30deg); /* IE 9 /
-webkit-transform: rotate(30deg); / Safari and Chrome */
}
-ms-transform:scale(2,3); /* IE 9 /
-webkit-transform: scale(2,3); / Safari /
transform: scale(2,3); / 標準語法 */
transform:skew( [,]);
包含兩個參數值，分別表示X軸和Y軸傾斜的角度，如果第二個參數為空，則默認為0，參數為負表示向相反方向傾斜。- skewX();表示只在X軸(水平方向)傾斜。- skewY();表示只在Y軸(垂直方向)傾斜。div {
transform: skew(30deg,20deg);
-ms-transform: skew(30deg,20deg); /* IE 9 /
-webkit-transform: skew(30deg,20deg); / Safari and Chrome */
}
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 */
}
div {
transform: rotateX(120deg);
-webkit-transform: rotateX(120deg); /* Safari 與 Chrome */
}
div {
transform: rotateY(130deg);
-webkit-transform: rotateY(130deg); /* Safari 與 Chrome */
}
div {
transition: width 2s;
-webkit-transition: width 2s; /* Safari */
}
div:hover { width:300px;}
**注意：** 當鼠標光標移動到該元素時，它逐漸改變它原有樣式------### 多項改變要添加多個樣式的變換效果，添加的屬性由逗號分隔：添加了寬度，高度和轉換效果：div {
transition: width 2s, height 2s, transform 2s;
-webkit-transition: width 2s, height 2s, -webkit-transform 2s;
}
div {
transition-property: width;
transition-duration: 1s;
transition-timing-function: linear;
transition-delay: 2s;
/* Safari */
-webkit-transition-property:width;
-webkit-transition-duration:1s;
-webkit-transition-timing-function:linear;
-webkit-transition-delay:2s;
}
div {
transition: width 1s linear 2s;
/* Safari */
-webkit-transition:width 1s linear 2s;
}
@keyframes myfirst
{
from {background: red;}
to {background: yellow;}
}
@-webkit-keyframes myfirst /* Safari 與 Chrome */
{
from {background: red;}
div {
animation: myfirst 5s;
-webkit-animation: myfirst 5s; /* Safari 與 Chrome */
}
@keyframes myfirst
{
0% {background: red;}
25% {background: yellow;}
50% {background: blue;}
100% {background: green;}
}
@-webkit-keyframes myfirst /* Safari 與 Chrome */
{
0% {background: red;}
25% {background: yellow;}
50% {background: blue;}
100% {background: green;}
}
@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 與 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-name: myfirst;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-play-state: running;
/* Safari 與 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;
}
div {
animation: myfirst 5s linear 2s infinite alternate;
/* Safari 與 Chrome: */
-webkit-animation: myfirst 5s linear 2s infinite alternate;
}
div {
-webkit-column-count: 3; /* Chrome, Safari, Opera /
-moz-column-count: 3; / Firefox */
column-count: 3;
}
div {
-webkit-column-gap: 40px; /* Chrome, Safari, Opera /
-moz-column-gap: 40px; / Firefox */
column-gap: 40px;
}
div {
-webkit-column-rule-style: solid; /* Chrome, Safari, Opera /
-moz-column-rule-style: solid; / Firefox */
column-rule-style: solid;
}
div {
-webkit-column-rule-width: 1px; /* Chrome, Safari, Opera /
-moz-column-rule-width: 1px; / Firefox */
column-rule-width: 1px;
}
div {
-webkit-column-rule-color: lightblue; /* Chrome, Safari, Opera /
-moz-column-rule-color: lightblue; / Firefox */
column-rule-color: lightblue;
}
div {
-webkit-column-rule: 1px solid lightblue; /* Chrome, Safari, Opera /
-moz-column-rule: 1px solid lightblue; / Firefox */
column-rule: 1px solid lightblue;
}
h2 {
-webkit-column-span: all; /* Chrome, Safari, Opera */
column-span: all;
}
div {
-webkit-column-width: 100px; /* Chrome, Safari, Opera */
column-width: 100px;
}
div { resize:both; overflow:auto;}
------CSS3 方框大小調整(Box Sizing)box-sizing 屬性允許您以確切的方式定義適應某個區域的具體內容。規定兩個并排的帶邊框方框：div {
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
width:50%;
float:left;
}
div {
border:2px solid black;
outline:2px solid red;
outline-offset:15px;
}
img {
border-radius: 8px;
}
img {
border-radius: 50%;
}
img {
border: 1px solid #ddd;
border-radius: 4px;
padding: 5px;
}
a {
display: inline-block;
border: 1px solid #ddd;
border-radius: 4px;
padding: 5px;
transition: 0.3s;
}
a:hover {
box-shadow: 0 0 2px 1px rgba
(0, 140, 186, 0.5);
}
img { max-width: 100%; height: auto;}
**提示:** Web 響應式設計更多內容可以參考 CSS 響應式設計教程。------### 卡片式圖片卡片式圖片
div.polaroid {
width: 80%;
background-color: white;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
img {width: 100%}
div.container {
text-align: center;
padding: 10px 20px;
}
img { -webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */ filter: grayscale(100%);}
**注意:** Internet Explorer 或 Safari 5.1 (及更早版本) 不支持該屬性。 代碼如下注意: Internet Explorer 或 Safari 5.1 (及更早版本) 不支持該屬性。
```提示: 訪問 CSS 濾鏡參考手冊 查看更多內容。
響應式圖片相冊
.responsive {padding: 0 6px;float: left;width: 24.99999%; } @media only screen and (max-width: 700px){.responsive {width: 49.99999%;margin: 6px 0;} } @media only screen and (max-width: 500px){.responsive {width: 100%;} }圖片 Modal(模態)
本實例演示了如何結合 CSS 和 JavaScript 來一起渲染圖片。
首先，我們使用 CSS 來創建 modal 窗口 (對話框), 默認是隱藏的。
然后，我們使用 JavaScript 來顯示模態窗口，當我們點擊圖片時，圖片會在彈出的窗口中顯示：
// 獲取模態窗口 var modal = document.getElementById('myModal'); // 獲取圖片模態框，alt 屬性作為圖片彈出中文本描述 var img = document.getElementById('myImg'); var modalImg = document.getElementById("img01"); var captionText = document.getElementById("caption"); img.onclick = function(){modal.style.display = "block";modalImg.src = this.src;modalImg.alt = this.alt;captionText.innerHTML = this.alt; } // Get the <span> element that closes the modal var span = document.getElementsByClassName("close")[0]; // When the user clicks on <span> (x), close the modal span.onclick = function() { modal.style.display = "none"; }CSS3 按鈕
CSS 按鈕
本章節我們為大家介紹使用 CSS 來制作按鈕。
基本按鈕樣式
代碼
<style> .btn {border: none;color: #FFFFFF;padding: 15px 32px;text-align: center;-webkit-transition-duration: 0.4s;transition-duration: 0.4s;margin: 16px 0 !important;text-decoration: none;font-size: 16px;background-color: rgb(48, 110, 50);border-top-color: initial;border-right-color: initial;border-bottom-color: initial;border-left-color: initial;color: rgb(255, 255, 255);text-decoration-color: initial; } </style> <button class="btn">CSS 按鈕</button> <button style="margin-left:25px;">默認按鈕</button> .button {background-color: #4CAF50; /* Green */border: none;color: white;padding: 15px 32px;text-align: center;text-decoration: none;display: inline-block;font-size: 16px; }按鈕顏色
Green Blue Red Gray Black
我們可以使用 background-color 屬性來設置按鈕顏色:
<style>.button1 {background-color: #4CAF50;} /* Green */.button2 {background-color: #008CBA;} /* Blue */.button3 {background-color: #f44336;} /* Red */ .button4 {background-color: #e7e7e7; color: black;} /* Gray */ .button5 {background-color: #555555;} /* Black */ </style> <button type="button" class="btn button1">Green</button> <button type="button" class="btn button2">Blue</button> <button type="button" class="btn button3">Red</button> <button type="button" class="btn button4">Gray</button> <button type="button" class="btn button5">Black</button>按鈕大小
我們可以使用 font-size 屬性來設置按鈕大小:
<style>.font1 {font-size: 10px;}.font2 {font-size: 12px;}.font3 {font-size: 16px;}.font4 {font-size: 20px;}.font5 {font-size: 24px;} </style> <div><button type="button" class="btn button1 font1">10px</button><button type="button" class="btn button2 font2">12px</button><button type="button" class="btn button3 font3">16px</button><button type="button" class="btn button4 font4">20px</button><button type="button" class="btn button5 font5">24px</button> </div>圓角按鈕
我們可以使用 border-radius 屬性來設置圓角按鈕:
<style>.round1 {border-radius: 2px;}.round2 {border-radius: 4px;}.round3 {border-radius: 8px;}.round4 {border-radius: 12px;}.round5 {border-radius: 50%;} </style> <div><button type="button" class="btn button1 round1">2px</button><button type="button" class="btn button2 round2">4px</button><button type="button" class="btn button3 round3">8px</button><button type="button" class="btn button4 round4">12px</button><button type="button" class="btn button5 round5">50%</button> </div>按鈕邊框顏色
我們可以使用 border 屬性設置按鈕邊框顏色:
.button1 {background-color: white;color: black;border: 2px solid #4CAF50; /* Green */ }演示效果
渲染效果如下
代碼如下
鼠標懸停按鈕
代碼如下<style> .border11:hover {background-color:#4CAF50;color:white;} .border22:hover {background-color:#008CBA;color:white;} .border33:hover {background-color:#f44336;color:white;} .border44:hover {background-color:#e7e7e7;} .border55:hover {background-color:#555555;color:white;} .border111{border-radius:3px;background-color:#4CAF50;color:white;} .border222{border-radius:3px;background-color:#008CBA;color:white;} .border333 {border-radius:3px;background-color:#f44336;color:white;} .border444 {border-radius:3px;background-color:#e7e7e7;} .border555 {border-radius:3px;background-color:#555555;color:white;} .border111:hover {background-color:white;color:black;border:2px solid #4CAF50;} .border222:hover {background-color:white;color:black;border:2px solid #008CBA;} .border333:hover {background-color:white;color:black;border:2px solid #f44336;} .border444:hover {background-color:white;color:black;border:2px solid #e7e7e7;} .border555:hover {background-color:white;color:black;border:2px solid #555555;} </style> <div><button type="button" class="btn border1 border111">綠</button><button type="button" class="btn border2 border222">藍</button><button type="button" class="btn border3 border333">紅</button><button type="button" class="btn border4 border444">灰</button><button type="button" class="btn border5 border555">黑</button> </div> <div><button type="button" class="btn border1 border11">綠</button><button type="button" class="btn border2 border22">藍</button><button type="button" class="btn border3 border33">紅</button><button type="button" class="btn border4 border44">灰</button><button type="button" class="btn border5 border55">黑</button> </div>我們可以使用 :hover 選擇器來修改鼠標懸停在按鈕上的樣式。
提示: 我們可以使用 transition-duration 屬性來設置 “hover” 效果的速度:
.button {-webkit-transition-duration: 0.4s; /* Safari */transition-duration: 0.4s; } .button:hover {background-color: #4CAF50; /* Green */color: white; }按鈕陰影
陰影按鈕 鼠標懸停后顯示陰影
我們可以使用 box-shadow 屬性來為按鈕添加陰影:
.button1 {box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19); } .button2:hover {box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19); }禁用按鈕
正常按鈕 禁用按鈕
代碼如下
<style>.disabled{cursor: not-allowed;opacity: 0.6;} </style> <div><button type="button" class="btn">正常按鈕</button><button type="button" class="btn disabled">禁用按鈕</button> </div>我們可以使用 opacity 屬性為按鈕添加透明度 (看起來類似 “disabled” 屬性效果)。
提示: 我們可以添加 cursor 屬性并設置為 “not-allowed” 來設置一個禁用的圖片:
.disabled {opacity: 0.6;cursor: not-allowed; }按鈕寬度
250px
50%
100%
代碼如下
<style>.width1 {width: 250px}.width2 {width: 50%}.width3 {width: 100%} </style> <div><button type="button" class="btn button1 width1">250px</button><br><button type="button" class="btn button2 width2">50%</button><br><button type="button" class="btn button3 width3">100%</button> </div>默認情況下，按鈕的大小有按鈕上的文本內容決定( 根據文本內容匹配長度 )。 我們可以使用 width 屬性來設置按鈕的寬度:
提示: 如果要設置固定寬度可以使用像素 (px) 為單位，如果要設置響應式的按鈕可以設置為百分比。
.button1 {width: 250px;}.button2 {width: 50%;}.button3 {width: 100%;}按鈕組
ButtonButtonButtonButton
效果如下
<style>.float {margin: 0 !important;float: left;transition: none;}.float:hover {background-color: #3e8e41;} </style> <div><button type="button" class="btn button1 float">Button</button><button type="button" class="btn button2 float">Button</button><button type="button" class="btn button3 float">Button</button><button type="button" class="btn button4 float">Button</button> </div>移除外邊距并添加 float:left 來設置按鈕組:
.button { float: left;}帶邊框按鈕組
ButtonButtonButtonButton
代碼如下
<button type="button" class="btn btn1 float" style="border: 1px solid green; --darkreader-inline-border-top:#00e500; --darkreader-inline-border-right:#00e500; --darkreader-inline-border-bottom:#00e500; --darkreader-inline-border-left:#00e500;" data-darkreader-inline-border-top="" data-darkreader-inline-border-right="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" >Button </button>我們可以使用 border 屬性來設置帶邊框的按鈕組:
.button { float: left; border: 1px solid green}按鈕動畫
鼠標移動到按鈕上后添加箭頭標記:
Hover
代碼如下
<style>.button {display: inline-block;border-radius: 4px;background-color: #f4511e;border: none;color: #FFFFFF;text-align: center;font-size: 28px;padding: 20px;width: 180px;transition: all 0.5s;cursor: pointer;margin: 5px;vertical-align:middle;}.button span {cursor: pointer;display: inline-block;position: relative;transition: 0.5s;}.button span :after {content: '?';position: absolute;opacity: 0;top: 0;right: -20px;transition: 0.5s;}.button:hover span {padding-right: 25px;}.button:hover span :after {opacity: 1;right: 0;} </style> <div ><button class="button"><span>Hover </span></button> </div>點擊時添加 “波紋” 效果:
Click Me
代碼如下
<style> .button123 {position: relative;background-color: #4CAF50;border: none;font-size: 28px;color: #FFFFFF;padding: 20px;width: 200px;text-align: center;-webkit-transition-duration: 0.4s; /* Safari */transition-duration: 0.4s;text-decoration: none;overflow: hidden;cursor: pointer; } .button123:after {content: "";background: #90EE90;display: block;position: absolute;padding-top: 300%;padding-left: 350%;margin-left: -20px!important;margin-top: -120%;opacity: 0;transition: all 0.8s } .button123:active:after {padding: 0;margin: 0;opacity: 1;transition: 0s } </style> <button class="button123">Click Me</button>點擊時添加 “壓下” 效果:
Click Me
代碼如下
<style>.button777 {display: inline-block;padding: 15px 25px;font-size: 24px;cursor: pointer;text-align: center; text-decoration: none;outline: none;color: #fff;background-color: #4CAF50;border: none;border-radius: 15px;box-shadow: 0 9px #999;}.button777:hover {background-color: #3e8e41}.button777:active {background-color: #3e8e41;box-shadow: 0 5px #666;transform: translateY(4px);} </style> <div><button class="button777">Click Me</button> </div>CSS3 box-sizing 盒子大小
CSS3 框大小
CSS3 box-sizing 屬性可以設置 width 和 height 屬性中包含了 padding(內邊距) 和 border(邊框)。
瀏覽器支持
表格中的數字表示支持該屬性的第一個瀏覽器的版本號。
緊跟在數字后面的 -webkit- 或 -moz- 為指定瀏覽器的前綴。
| box-sizing | 10.0 4.0 -webkit- | 8.0 | 29.0 2.0 -moz- | 5.1 3.1 -webkit- | 9.5 |
使用 CSS3 box-sizing 屬性
默認情況下，元素的寬度與高度計算方式如下：
width(寬) + padding(內邊距) + border(邊框) = 元素實際寬度
height(高) + padding(內邊距) + border(邊框) = 元素實際高度
這就意味著我們在設置元素的 width/height 時，元素真實展示的高度與寬度會更大(因為元素的邊框與內邊距也會計算在 width/height 中)。
<style>.div11 {width: 300px;height: 100px;border: 1px solid blue; }.div22 {width: 300px;height: 100px;padding: 50px;border: 1px solid red;} </style> <div class="div11">這個是個較小的框 (width 為 300px ，height 為 100px)</div> <div class="div22">這個是個較大的框 (width 為 300px ，height 為 100px)</div>這個是個較小的框 (width 為 300px ，height 為 100px)
這個是個較大的框 (width 為 300px ，height 為 100px)
以上兩個元素雖然寬度與高度設置一樣，但真實展示的大小不一致，因為 div2 指定了內邊距padding: 50px;:
使用這種方式如果想要獲得較小的那個框且包含內邊距，就不得不考慮到邊框和內邊距的寬度。
CSS3 的 box-sizing 屬性很好的解決了這個問題。
使用 CSS3 box-sizing 屬性
CSS3 box-sizing 屬性在一個元素的 width 和 height 中包含 padding(內邊距) 和 border(邊框)。
如果在元素上設置了 box-sizing: border-box; 則 padding(內邊距) 和 border(邊框) 也包含在 width 和 height 中:
兩個 div 現在是一樣大小的!
以下是兩個<div>元素添加 box-sizing: border-box; 屬性的簡單實例。
<style>.div1 {width: 300px;height: 100px;border: 1px solid blue;box-sizing: border-box;}.div2 {width: 300px;height: 100px;padding: 50px;border: 1px solid red;box-sizing: border-box;} </style> <div class="div1">兩個 div 現在是一樣大小的!</div> <div class="div2">兩個 div 現在是一樣大小的!</div>兩個 div 現在是一樣大小的!
兩個 div 現在是一樣大小的!
從結果上看 box-sizing: border-box; 效果更好，也正是很多開發人員需要的效果。
以下代碼可以讓所有元素以更直觀的方式展示大小。很多瀏覽器已經支持 box-sizing: border-box; (但是并非所有 - 這就是為什么 input 和 text 元素設置了 width: 100%; 后的寬度卻不一樣)。
所有元素使用 box-sizing 是比較推薦的：
* { box-sizing: border-box;}CSS3 Flex布局 / 彈性盒子語法教程
CSS3 彈性盒子(Flex Box)
彈性盒子是 CSS3 的一種新的布局模式。
CSS3 彈性盒（ Flexible Box 或 flexbox），是一種當頁面需要適應不同的屏幕大小以及設備類型時確保元素擁有恰當的行為的布局方式。
引入彈性盒布局模型的目的是提供一種更加有效的方式來對一個容器中的子元素進行排列、對齊和分配空白空間。
瀏覽器支持
表格中的數字表示支持該屬性的第一個瀏覽器的版本號。
緊跟在數字后面的 -webkit- 或 -moz- 為指定瀏覽器的前綴。
| Basic support (single-line flexbox) | 29.0 21.0 -webkit- | 11.0 | 22.0 18.0 -moz- | 6.1 -webkit- | 12.1 -webkit- |
| Multi-line flexbox | 29.0 21.0 -webkit- | 11.0 | 28.0 | 6.1 -webkit- | 17.0 15.0 -webkit- 12.1 |
CSS3 彈性盒子內容
彈性盒子由彈性容器(Flex container)和彈性子元素(Flex item)組成。
彈性容器通過設置 display 屬性的值為 flex 或 inline-flex將其定義為彈性容器。
彈性容器內包含了一個或多個彈性子元素。
注意： 彈性容器外及彈性子元素內是正常渲染的。彈性盒子只定義了彈性子元素如何在彈性容器內布局。
彈性子元素通常在彈性盒子內一行顯示。默認情況每個容器只有一行。
以下元素展示了彈性子元素在一行內顯示，從左到右:
<!DOCTYPE html> <html> <head> <style> .flex-container {display: -webkit-flex;display: flex;width: 400px;height: 250px;background-color: lightgrey; }.flex-item {background-color: cornflowerblue;width: 100px;height: 100px;margin: 10px; } </style> </head> <body><div class="flex-container"><div class="flex-item">flex item 1</div><div class="flex-item">flex item 2</div><div class="flex-item">flex item 3</div> </div></body> </html>當然我們可以修改排列方式。
如果我們設置 direction 屬性為 rtl (right-to-left),彈性子元素的排列方式也會改變，頁面布局也跟著改變:
body {direction: rtl; }.flex-container {display: -webkit-flex;display: flex;width: 400px;height: 250px;background-color: lightgrey; }.flex-item {background-color: cornflowerblue;width: 100px;height: 100px;margin: 10px; }flex-direction
flex-direction 屬性指定了彈性子元素在父容器中的位置。
語法
flex-direction: row | row-reverse | column | column-reverseflex-direction的值有:
- row：橫向從左到右排列（左對齊），默認的排列方式。
- row-reverse：反轉橫向排列（右對齊，從后往前排，最后一項排在最前面。
- column：縱向排列。
- column-reverse：反轉縱向排列，從后往前排，最后一項排在最上面。
以下實例演示了 row-reverse 的使用:
實例
.flex-container {display: -webkit-flex;display: flex;-webkit-flex-direction: row-reverse;flex-direction: row-reverse;width: 400px;height: 250px;background-color: lightgrey; }以下實例演示了 column 的使用:
.flex-container { display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; width: 400px; height: 250px; background-color: lightgrey;}以下實例演示了 column-reverse 的使用:
.flex-container {display: -webkit-flex;display: flex;-webkit-flex-direction: column;flex-direction: column;width: 400px;height: 250px;background-color: lightgrey; }justify-content 屬性
內容對齊（justify-content）屬性應用在彈性容器上，把彈性項沿著彈性容器的主軸線（main axis）對齊。
justify-content 語法如下：
justify-content: flex-start | flex-end | center | space-between | space-around各個值解析:
-
flex-start：
彈性項目向行頭緊挨著填充。這個是默認值。第一個彈性項的main-start外邊距邊線被放置在該行的main-start邊線，而后續彈性項依次平齊擺放。
-
flex-end：
彈性項目向行尾緊挨著填充。第一個彈性項的main-end外邊距邊線被放置在該行的main-end邊線，而后續彈性項依次平齊擺放。
-
center：
彈性項目居中緊挨著填充。（如果剩余的自由空間是負的，則彈性項目將在兩個方向上同時溢出）。
-
space-between：
彈性項目平均分布在該行上。如果剩余空間為負或者只有一個彈性項，則該值等同于flex-start。否則，第1個彈性項的外邊距和行的main-start邊線對齊，而最后1個彈性項的外邊距和行的main-end邊線對齊，然后剩余的彈性項分布在該行上，相鄰項目的間隔相等。
-
space-around：
彈性項目平均分布在該行上，兩邊留有一半的間隔空間。如果剩余空間為負或者只有一個彈性項，則該值等同于center。否則，彈性項目沿該行分布，且彼此間隔相等（比如是20px），同時首尾兩邊和彈性容器之間留有一半的間隔（1/2*20px=10px）。
效果圖展示：
以下實例演示了 flex-end 的使用:
.flex-container {display: -webkit-flex;display: flex;-webkit-justify-content: flex-end;justify-content: flex-end;width: 400px;height: 250px;background-color: lightgrey; }以下實例演示了 center 的使用:
.flex-container { display: -webkit-flex; display: flex; -webkit-justify-content: center; justify-content: center; width: 400px; height: 250px; background-color: lightgrey;}以下實例演示了 space-between 的使用:
.flex-container {display: -webkit-flex;display: flex;-webkit-justify-content: center;justify-content: center;width: 400px;height: 250px;background-color: lightgrey; }以下實例演示了 space-around 的使用:
.flex-container {display: -webkit-flex;display: flex;-webkit-justify-content: space-around;justify-content: space-around;width: 400px;height: 250px;background-color: lightgrey; }align-items 屬性
align-items 設置或檢索彈性盒子元素在側軸（縱軸）方向上的對齊方式。
語法
align-items: flex-start | flex-end | center | baseline | stretch各個值解析:
- flex-start：彈性盒子元素的側軸（縱軸）起始位置的邊界緊靠住該行的側軸起始邊界。
- flex-end：彈性盒子元素的側軸（縱軸）起始位置的邊界緊靠住該行的側軸結束邊界。
- center：彈性盒子元素在該行的側軸（縱軸）上居中放置。（如果該行的尺寸小于彈性盒子元素的尺寸，則會向兩個方向溢出相同的長度）。
- baseline：如彈性盒子元素的行內軸與側軸為同一條，則該值與’flex-start’等效。其它情況下，該值將參與基線對齊。
- stretch：如果指定側軸大小的屬性值為’auto’，則其值會使項目的邊距盒的尺寸盡可能接近所在行的尺寸，但同時會遵照’min/max-width/height’屬性的限制。
以下實例演示了 stretch(默認值) 的使用:
.flex-container {display: -webkit-flex;display: flex;-webkit-align-items: stretch;align-items: stretch;width: 400px;height: 250px;background-color: lightgrey; }以下實例演示了 flex-start 的使用:
.flex-container {display: -webkit-flex;display: flex;-webkit-align-items: flex-start;align-items: flex-start;width: 400px;height: 250px;background-color: lightgrey; }以下實例演示了 flex-end 的使用:
.flex-container {display: -webkit-flex;display: flex;-webkit-align-items: flex-end;align-items: flex-end;width: 400px;height: 250px;background-color: lightgrey; }以下實例演示了 center 的使用:
.flex-container {display: -webkit-flex;display: flex;-webkit-align-items: center;align-items: center;width: 400px;height: 250px;background-color: lightgrey; }以下實例演示了 baseline 的使用:
.flex-container {display: -webkit-flex;display: flex;-webkit-align-items: baseline;align-items: baseline;width: 400px;height: 250px;background-color: lightgrey; }flex-wrap 屬性
flex-wrap 屬性用于指定彈性盒子的子元素換行方式。
語法
flex-wrap: nowrap|wrap|wrap-reverse|initial|inherit;各個值解析:
- nowrap - 默認， 彈性容器為單行。該情況下彈性子項可能會溢出容器。
- wrap - 彈性容器為多行。該情況下彈性子項溢出的部分會被放置到新行，子項內部會發生斷行
- wrap-reverse -反轉 wrap 排列。
以下實例演示了 nowrap 的使用:
.flex-container {display: -webkit-flex;display: flex;-webkit-flex-wrap: nowrap;flex-wrap: nowrap;width: 300px;height: 250px;background-color: lightgrey; }以下實例演示了 wrap 的使用:
.flex-container {display: -webkit-flex;display: flex;-webkit-flex-wrap: wrap;flex-wrap: wrap;width: 300px;height: 250px;background-color: lightgrey; }以下實例演示了 wrap-reverse 的使用:
.flex-container {display: -webkit-flex;display: flex;-webkit-flex-wrap: wrap-reverse;flex-wrap: wrap-reverse;width: 300px;height: 250px;background-color: lightgrey; }align-content 屬性
align-content 屬性用于修改 flex-wrap 屬性的行為。類似于 align-items, 但它不是設置彈性子元素的對齊，而是設置各個行的對齊。
語法
align-content: flex-start | flex-end | center | space-between | space-around | stretch各個值解析:
- stretch - 默認。各行將會伸展以占用剩余的空間。
- flex-start - 各行向彈性盒容器的起始位置堆疊。
- flex-end - 各行向彈性盒容器的結束位置堆疊。
- center -各行向彈性盒容器的中間位置堆疊。
- space-between -各行在彈性盒容器中平均分布。
- space-around - 各行在彈性盒容器中平均分布，兩端保留子元素與子元素之間間距大小的一半。
以下實例演示了 center 的使用:
實例
.flex-container {display: -webkit-flex;display: flex;-webkit-flex-wrap: wrap;flex-wrap: wrap;-webkit-align-content: center;align-content: center;width: 300px;height: 300px;background-color: lightgrey; }彈性子元素屬性
排序
#語法
draft: trueorder:各個值解析:
- ：用整數值來定義排列順序，數值小的排在前面。可以為負值。
order 屬性設置彈性容器內彈性子元素的屬性:
實例
.flex-item {background-color: cornflowerblue;width: 100px;height: 100px;margin: 10px; }.first {-webkit-order: -1;order: -1; }對齊
設置”margin”值為”auto”值，自動獲取彈性容器中剩余的空間。所以設置垂直方向margin值為”auto”，可以使彈性子元素在彈性容器的兩上軸方向都完全居中。
以下實例在第一個彈性子元素上設置了 margin-right: auto; 。 它將剩余的空間放置在元素的右側：
實例
.flex-item { background-color: cornflowerblue; width: 75px; height: 75px; margin: 10px;} .flex-item:first-child { margin-right: auto;}完美的居中
以下實例將完美解決我們平時碰到的居中問題。
使用彈性盒子，居中變的很簡單，只想要設置 margin: auto; 可以使得彈性子元素在兩上軸方向上完全居中:
實例
.flex-item {
background-color: cornflowerblue;
width: 75px;
height: 75px;
margin: 10px;
}
.flex-item:first-child {
margin-right: auto;
}
align-self: auto | flex-start | flex-end | center | baseline | stretch
各個值解析:- auto：如果’align-self’的值為’auto’，則其計算值為元素的父元素的’align-items’值，如果其沒有父元素，則計算值為’stretch’。 - flex-start：彈性盒子元素的側軸（縱軸）起始位置的邊界緊靠住該行的側軸起始邊界。 - flex-end：彈性盒子元素的側軸（縱軸）起始位置的邊界緊靠住該行的側軸結束邊界。 - center：彈性盒子元素在該行的側軸（縱軸）上居中放置。（如果該行的尺寸小于彈性盒子元素的尺寸，則會向兩個方向溢出相同的長度）。 - baseline：如彈性盒子元素的行內軸與側軸為同一條，則該值與’flex-start’等效。其它情況下，該值將參與基線對齊。 - stretch：如果指定側軸大小的屬性值為’auto’，則其值會使項目的邊距盒的尺寸盡可能接近所在行的尺寸，但同時會遵照’min/max-width/height’屬性的限制。以下實例演示了彈性子元素上 align-self 不同值的應用效果：### 實例.flex-item {
background-color: cornflowerblue;
width: 60px;
min-height: 100px;
margin: 10px;
}
.item1 {
-webkit-align-self: flex-start;
align-self: flex-start;
}
.item2 {
-webkit-align-self: flex-end;
align-self: flex-end;
}
.item3 {
-webkit-align-self: center;
align-self: center;
}
.item4 {
-webkit-align-self: baseline;
align-self: baseline;
}
.item5 {
-webkit-align-self: stretch;
align-self: stretch;
}
flex: auto | initial | none | inherit | [ flex-grow ] || [ flex-shrink ] || [ flex-basis ]
各個值解析:- auto: 計算值為 1 1 auto - initial: 計算值為 0 1 auto - none：計算值為 0 0 auto - inherit：從父元素繼承 - [ flex-grow ]：定義彈性盒子元素的擴展比率。 - [ flex-shrink ]：定義彈性盒子元素的收縮比率。 - [ flex-basis ]：定義彈性盒子元素的默認基準值。**以下實例中，第一個彈性子元素占用了 2?4 的空間，其他兩個各占 1?4 的空間:**.flex-item {background-color: cornflowerblue;margin: 10px; }.item1 {-webkit-flex: 2;flex: 2; }.item2 {-webkit-flex: 1;flex: 1; }.item3 {-webkit-flex: 1;flex: 1; }CSS3 彈性盒子屬性
下表列出了在彈性盒子中常用到的屬性:
| display | 指定 HTML 元素盒子類型。 |
| flex-direction | 指定了彈性容器中子元素的排列方式 |
| justify-content | 設置彈性盒子元素在主軸（橫軸）方向上的對齊方式。 |
| align-items | 設置彈性盒子元素在側軸（縱軸）方向上的對齊方式。 |
| flex-wrap | 設置彈性盒子的子元素超出父容器時是否換行。 |
| align-content | 修改 flex-wrap 屬性的行為，類似 align-items, 但不是設置子元素對齊，而是設置行對齊 |
| flex-flow | flex-direction 和 flex-wrap 的簡寫 |
draft: true order | 設置彈性盒子的子元素排列順序。 align-self | 在彈性子元素上使用。覆蓋容器的 align-items 屬性。 flex | 設置彈性盒子的子元素如何分配空間。
CSS3 多媒體查詢
CSS3 多媒體查詢
CSS2 多媒體類型
@media 規則在 CSS2 中有介紹，針對不同媒體類型可以定制不同的樣式規則。
例如：你可以針對不同的媒體類型(包括顯示器、便攜設備、電視機，等等)設置不同的樣式規則。
但是這些多媒體類型在很多設備上支持還不夠友好。
CSS3 多媒體查詢
CSS3 的多媒體查詢繼承了 CSS2 多媒體類型的所有思想： 取代了查找設備的類型，CSS3 根據設置自適應顯示。
媒體查詢可用于檢測很多事情，例如：
- viewport(視窗) 的寬度與高度
- 設備的寬度與高度
- 朝向 (智能手機橫屏，豎屏) 。
- 分辨率
目前很多針對蘋果手機，Android 手機，平板等設備都會使用到多媒體查詢。
瀏覽器支持
表格中的數字表示支持該屬性的第一個瀏覽器的版本號。
| @media | 21.0 | 9.0 | 3.5 | 4.0 | 9.0 |
多媒體查詢語法
多媒體查詢由多種媒體組成，可以包含一個或多個表達式，表達式根據條件是否成立返回 true 或 false。
@media not|only mediatype and (expressions) { CSS 代碼...;}如果指定的多媒體類型匹配設備類型則查詢結果返回 true，文檔會在匹配的設備上顯示指定樣式效果。
除非你使用了 not 或 only 操作符，否則所有的樣式會適應在所有設備上顯示效果。
- not: not是用來排除掉某些特定的設備的，比如 @media not print（非打印設備）。
- only: 用來定某種特別的媒體類型。對于支持Media Queries的移動設備來說，如果存在only關鍵字，移動設備的Web瀏覽器會忽略only關鍵字并直接根據后面的表達式應用樣式文件。對于不支持Media Queries的設備但能夠讀取Media Type類型的Web瀏覽器，遇到only關鍵字時會忽略這個樣式文件。
- all: 所有設備，這個應該經常看到。
你也可以在不同的媒體上使用不同的樣式文件：
<link rel="stylesheet" media="mediatype and|not|only (expressions)" href="print.css">CSS3 多媒體類型
值 | 描述 –|— all | 用于所有多媒體類型設備 print | 用于打印機 screen | 用于電腦屏幕，平板，智能手機等。 speech | 用于屏幕閱讀器
多媒體查詢簡單實例
使用多媒體查詢可以在指定的設備上使用對應的樣式替代原有的樣式。
以下實例中在屏幕可視窗口尺寸大于 480 像素的設備上修改背景顏色:
@media screen and (min-width: 480px) { body { background-color: lightgreen; } }以下實例在屏幕可視窗口尺寸大于 480 像素時將菜單浮動到頁面左側：
@media screen and (min-width: 480px) { #leftsidebar {width: 200px; float: left;} #main {margin-left:216px;} }CSS3 @media 參考
更多多媒體查詢內容可以參考 @media 規則。
總結
- 上一篇： Teamviewer11现在无法捕捉屏幕
- 下一篇： CSS入门基础