CSS3

布局

-

Grid布局圖中

藍色的線不會出現在實際的網頁中。

Grid布局應用很廣泛，最簡單的例子就是内容的分欄顯示。

對于左邊這個布局複雜的三欄網頁來說，如果使用CSS3Grid布局的話，我們隻需這樣寫：

body{columns:3;column-gap:0.5in;}

img{float:pagetopright;width:3gr;}

其中，body部分聲明頁面為3欄，欄間距為0.5英寸；img中float屬性指明圖片浮動位置為頁面的右上角，而寬度為3個欄寬。隻需這樣兩行CSS，就可以實現這個複雜布局。

Flexbox

Flexbox(伸縮布局盒) 是 CSS3 中一個新的布局模式，為了現代網絡中更為

複雜的網頁需求而設計。

Flexbox 由 伸縮容器 和 伸縮項目 組成。通過設置元素的 display 屬性為 flex 或 inline-flex 可以得到一個伸縮容器。設置為 flex 的容器被渲染為一個塊級元素，而設置為 inline-flex 的容器則渲染為一個行内元素。

Flexbox通常能讓我們更好的操作他的子元素布局，例如：

如果元素容器沒有足夠的空間，我們無需計算每個元素的寬度，就可以設置他們在同一行；

可以快速讓他們布局在一列；

可以方便讓他們對齊容器的左、右、中間等；

無需修改結構就可以改變他們的顯示順序；

如果元素容器設置百分比和視窗大小改變，不用擔心未指定元素的确切寬度而破壞布局，因為容器中的每個子元素都可以自動分配容器的寬度或高度的比例。

生成工具

CSS3 Maker

這款工具非常強大，可在線演示漸變、陰影、旋轉、動畫等非常多的效果，并生成對應效果的代碼，

CSS3 Generator

非常不錯的各種 CSS3 代碼生成器，支持圓角、漸變、旋轉和陰影等衆多特性，帶預覽效果。

CSS3 Please

帥且酷的一款 CSS3 工具，可即時在線修改代碼并預覽效果，還有詳細的浏覽器兼容情況。

特性

1、圓角表格，對應屬性：border-radius。

2、以往對網頁上的文字加特效隻能用filter這個屬性，這次CSS3中專門制訂了一個加文字特效的屬性，而且不止加陰影這種效果。對應屬性：font-effect。

3、豐富了對鍊接下劃線的樣式，以往的下劃線都是直線，這次可不一樣了，有波浪線、點線、虛線等等，更可對下劃線的顔色和位置進行任意改變。

（還有對應頂線和中橫線的樣式，效果與下劃線類似）對應屬性：text-underline-style，text-underline-color，text-underline-mode，text-underline-position。

4、在文字下點幾個點或打個圈以示重點，CSS3也開始加入了這項功能，這應該在某些特定網頁上很有用。對應屬性：font-emphasize-style和font-emphasize-position。

邊框

border-color:控制邊框顔色，并且有了更大的靈活性，可以産生漸變效果

border-image:控制邊框圖像

border-corner-image:控制邊框邊角的圖像

border-radius:能産生類似圓角矩形的效果

背景

background-origin:決定了背景在盒模型中的初始位置，提供了3個值，border, padding和content

border:控制背景起始于左上角的邊框

padding:控制背景起始于左上角的留白

content:控制背景起始于左上角的内容background-clip:決定邊框是否複蓋住背景（默認是不複蓋），提供了兩個值，border和padding

border:會複蓋住背景

padding:不會複蓋背景

background-size:可以指定背景大小，以象素或百分比顯示。當指定為百分比時，大小會由所在區域的寬度、高度，以及background-origin的位置決定

multiple backgrounds:多重背景圖像，可以把不同背景圖像隻放到一個塊元素裡。

文字效果

text-shadow:文字投影，可能是因為MAC OSX的safari浏

覽器開始支持投影才特意增加的。

text -overflow:當文字溢出時，用“…”提示。包括ellipsis、clip、ellipsis-word、inherit，前兩個CSS2就有了，還是部分支持，但有趣的是IE6居然也支持。ellipsis-word可以省略掉最後一個單詞，對中文意義不大，inherit可以繼承父級元素。

顔色

HSL colors:除了支持RGB顔色外，還支持HSL（色相、飽和度、亮度）。以前一般都是作圖的時候用HSL色譜，但這樣一來會包括更多的顔色。H用度表示，S和L用百分比表示，比如hsl（0,100%, 50%）

HSLA colors:加了個不透明度（Apacity），用0到1之間的數來表示，比如hsla（0,100%,50%,0.2）

opacity:直接控制不透明度，用0到1之間的數來表示

RGBA colors:和HSLA colors類似，加了個不透明度。一直以來，浏覽器的透明一直無法實現單純的顔色透明，每次使用alpha後就會把透明的屬性繼承到子節點上。

換句話說，很難實現背景顔色透明而文字不透明的效果。直到RGBA顔色的出現這一切将成為現實。

實現這樣的效果非常簡單，設置顔色的時候我們使用标準的rgba（）單位即可，例如rgba（255,0,0,0.4）這樣就出現了一個紅色同時擁有alpha透明為0.4的顔色。

經過測試firefox3.0、safari3.2、opera10都支持了rgba單位。

動畫屬性

變形(transform)、轉換(transition)和動畫(animation)

transform: rotate | scale | skew | translate |matrix;

旋轉rotate、扭曲skew、縮放scale和移動translate以及矩陣變形matrix。

transition主要包含四個屬性值：執行變換的屬性：transition-property,變換延續的時間：transition-duration,在延續時間段，變換的速率變化transition-timing-function,變換延遲時間transition-delay。下面分别來看這四個屬性值

在開始介紹Animation之前我們有必要先來了解一個特殊的東西，那就是"Keyframes",我們把他叫做“關鍵幀”，玩過flash的朋友可能對這個東西并不會陌生。下面我們就一起來看看這個“Keyframes”是什麼東西。

前面我們在使用transition制作一個簡單的transition效果時，我們包括了初始屬性和最終屬性，一個開始執行動作時間和一個延續動作時間以及動作的變換速率，其實這些值都是一個中間值。

如果我們要控制的更細一些，比如說我要第一個時間段執行什麼動作，第二個時間段執行什麼動作（換到flash中說，就是第一幀我要執行什麼動作，第二幀我要執行什麼動作），這樣我們用Transition就很難實現了，此時我們也需要這樣的一個“關鍵幀”來控制。

那麼CSS3的Animation就是由“keyframes”這個屬性來實現這樣的效果。下面我們一起先來看看Keyframes:

Keyframes具有其自己的語法規則，他的命名是由"@keyframes"開頭，後面緊接着是這個“動畫的名稱”加上一對花括号“{}”，括号中就是一些不同時間段樣式規則，有點像我們css的樣式寫法一樣。

對于一個"@keyframes"中的樣式規則是由多個百分比構成的，如“0%”到"100%"之間，我們可以在這個規則中創建多個百分比，我們分别給每一個百分比中給需要有動畫效果的元素加上不同的屬性，從而讓元素達到一種在不斷變化的效果，比如說移動，改變元素顔色，位置，大小，形狀等。

不過有一點需要注意的是，我們可以使用“fromt”“to”來代表一個動畫是從哪開始，到哪結束，也就是說這個 "from"就相當于"0%"而"to"相當于"100%"。

值得一說的是，其中"0%"不能像别的屬性取值一樣把百分比符号省略，我們在這裡必須加上百分符号（“%”）如果沒有加上的話，我們這個keyframes是無效的，不起任何作用。因為keyframes的單位隻接受百分比值。

用戶界面

resize:可以由用戶自己調整div的大小，有horizontal（水平）vertical（垂直）或者both（同時），或者同時調整。如果再加上max-width或min-width的話還可以防止破壞布局

選擇器

CSS3增加了更多的CSS選擇器，可以實現更簡單但是更強大的功能，比如:nth-child()等。

Attribute selectors:在屬性中可以加入通配符，包括^,$,*

[att^=val]:表示開始字符是val的att屬性

[att$=val]:表示結束字符是val的att屬性

[att*=val]:表示包含至少有一個val的att屬性

其它模塊：

（Other modules）

media queries:感覺叫媒體選擇比較合适，可以為網頁中不同的對象設置不同的浏覽設備。比如可以為某一塊分别設置屏幕浏覽樣式和手機浏覽樣式，以前則隻能設置整個網頁。

multi-column layout:多列布局，讓文字以多列顯示，包括column-width、column-count、column-gap三個值

column-width:指定每列寬度

column-count:指定列數

column-gap:指定每列之間的間距

column-rule-color:控制列間的顔色

column-rule-style:控制列間的樣式

column-rule-width:控制列間的寬度

column-space-distribution:平均分配列間距

影響

CSS3将完全向後兼容，所以沒有必要修改的設計來讓它們繼續運作。網絡浏覽器也還将繼續支持CSS2。

CSS3主要的影響是将可以使用新的可用的選擇器和屬性，這些會允許實現新的設計效果（譬如動态和漸變），而且可以很簡單的設計出現在的設計效果（比如說使用分欄）。

選擇符

選擇符類型

表達式

描述

子串匹配的屬性選擇符

E[att^="val"]

匹配具有att屬性、且值以val開頭的E元素

子串匹配的屬性選擇符

E[att$="val"]

匹配具有att屬性、且值以val結尾的E元素

子串匹配的屬性選擇符

E[att*="val"]

匹配具有att屬性、且值中含有val的E元素

結構性僞類

E:root

匹配文檔的根元素。在 HTML （ 标準通用标記語言 下的一個應用）中，根元素永遠是HTML

結構性僞類

E:nth-child(n)

匹配父元素中的第n個子元素E

結構性僞類

E:nth-last-child(n)

匹配父元素中的倒數第n個結構子元素E

結構性僞類

E:nth-of-type(n)

匹配同類型中的第n個同級兄弟元素E

結構性僞類

E:nth-last-of-type(n)

匹配同類型中的倒數第n個同級兄弟元素E

結構性僞類

E:last-child

匹配父元素中最後一個E元素

結構性僞類

E:first-of-type

匹配同級兄弟元素中的第一個E元素

結構性僞類

E:only-child

匹配屬于父元素中唯一子元素的E

結構性僞類

E:only-of-type

匹配屬于同類型中唯一兄弟元素的E

結構性僞類

E:empty

匹配沒有任何子元素（包括text節點）的元素E

目标僞類

E:target

匹配相關URL指向的E元素

UI元素狀态僞類

E:enabled

匹配所有用戶界面（form表單）中處于可用狀态的E元素

UI元素狀态僞類

E:disabled

匹配所有用戶界面（form表單）中處于不可用狀态的E元素

UI元素狀态僞類

E:checked

匹配所有用戶界面（form表單）中處于選中狀态的元素E

UI元素狀态僞類

E::selection

匹配E元素中被用戶選中或處于高亮狀态的部分

否定僞類

E:not(s)

匹配所有不匹配簡單選擇符s的元素E

通用兄弟元素選擇器

E ~ F

匹配E元素之後的F元素

和2.1的區别

大家都知道我們習慣性稱作的 CSS3 對于 CSS2.1 有很多的修改和補充。抛開浏覽器的兼容性問題，這裡把所有的變化整理到一份表格中便于學習和查閱。不能保證沒有遺漏，歡迎大家補充。

新增的 屬性

新增的每個屬性新值

其它 新特性

animation (and eight associated longhand properties)

background-clip

background-origin

background-size

border-radius (and four associated longhand properties)

border-image (and six associated longhand properties)

box-decoration-break

box-shadow

box-sizing

columns (and thirteen associated multi-column properties)

clear-after

flex (and eleven associated flexbox properties)

font-stretch

font-size-adjust

font-synthesis

font-kerning

font-variant-caps

hanging-punctuation

hyphens

icon

image-resolution

image-orientation

line-break

object-fit

object-position

opacity

outline-offset

overflow-wrap / word-wrap

backface-visibility

perspective

perspective-origin

pointer-events (for HTML)

resize

tab-size

text-align-last

text-decoration-line

text-decoration-skip

text-decoration-position

text-decoration-style

text-emphasis (and three associated properties)

text-justify

text-orientation

text-overflow

transform

transform-style

text-shadow

transition (and four associated longhand properties)

word-break

word-spacing

writing-mode

Value “local” for the background-attachment property

Value "rgba()" for any property that accepts a color value

Value "hsl()" for any property that accepts a color value

Value "hsla()" for any property that accepts a color value

Value "currentColor" for any property that accepts a color value

Value "inset()" for the clip property

Value "linear-gradient()" for any property that accepts an image value

Value "radial-gradient()" for any property that accepts an image value

Value "repeating-linear-gradient()" for any property that accepts an image value

Value "repeating-radial-gradient()" for any property that accepts an image value

Value "image()" for any property that accepts an image value

Multiple comma-separated images for any property that accepts an image value

Multiple comma-separated background-related values to match multiple background image declarations

Value "center" for the position property

Value "page" for the position property

Value "space" for the background-repeat property

Value "round" for the background-repeat property

15 new values for the cursor property

Values "flex" and "inline-flex" for the display property

Values "all-small-caps", "petite-caps", "all-petite-caps", "titling-caps", and "unicase" for the font-variant property

Multiple, space-separated values for the letter-spacing property

New values for the text-align property, including "", "match-parent", "start", "end", and "start end"

text-decoration is now a shorthand property

Keywords "hanging" and "each-line" declared along with length or percentage values for the tfext-indent property

Value "full-width" for the text-transform property

rem units for lengths

calc() units for lengths

toggle() units

Angle units (deg, grad, rad, turn)

Time units (s, ms)

@font-face

Media Queries

Keyframe animations using @keyframes

Conditional styles using @supports

Namespacing using @namespace

Regions

Filters

注：仍在變化中的特性

Counter Styles Level 3

Device Adaptation

Display Module Level 3

Line Grid

Mobile Text Size Adjustment

CSS Variables

Box Alignment

The "all" property

Exclusions and Shapes

Generated Content for Paged Media

Grid Layout

Grid Template Layout

Line Layout Module

New features in Lists and Counters

Overflow Module

New features in Paged Media

New features in CSS Sizing

Media Queries Level 4

Selectors Level 4

ch units

Viewport relative lengths

New resolution units

Compositing and Blending

New features in CSS speech

The unicode-range descriptor for @font-face

New features in CSS Images and Replaced Content

CSS Masking

CSS3模塊

CSS3被拆分為"模塊"。

舊規範已拆分成小塊，還增加了新的。

一些最重要CSS3模塊如下：

選擇器

盒模型

背景和邊框

文字特效

2D/3D轉換

動畫

多列布局

用戶界面