1996年12月に、「Cascading Style Sheets, level 1 (CSS1)」が勧告されました。
これにより、フォントプロパティ、色および背景のプロパティ、テキストプロパティ、ボックスプロパティなどが策定され、現在のような表現が出来るようになりました。
1998年5月の「Cascading Style Sheets, level 2 (CSS2)」の勧告では、モニターやTV、紙媒体などの表示媒体によって自動的にスタイルシートを変更できるようになりました。
2004年2月に「Cascading Style Sheets, level 2 revision 1 (CSS2.1)」が勧告候補と上がりましたが、マイナーチェンジ止まりでした。
現在のスタイルシートの多くは、1998年勧告のCSS2を基にしています。
今回のCSS3は、約10年以上経ってのバージョンアップとなります。

CSS3は厳密にはHTML5とは別のものになります。
「HTML5とは」で述べたように、狭義の意味では「HTML5」と「CSS3」は別の仕様となっています。
他のAPIと共に、広い意味で「CSS3」も「HTML5と関連API」の集合体の一部、または多くの資料には「HTML5+CSS3」として表現されるものです。

CSS3の仕様は、各機能を分化して管理しようという考え方から、全体がモジュール化されています。
各モジュールは、「中途半端な実装を避けるため」に個別に完成させるようになっています。

CSS3の各モジュールの説明や詳細は大変膨大な資料となりますので、ここではCSS3によって追加された主なものを中心に一部をご紹介致します。
各CSS3モジュールに対応したブラウザでご覧いただけますと、その効果を確認することが出来ます。
なお実装にはばらつきがありますので、ブラウザによっては効果を確認出来ないものもございます。

CSS3から、背景やボーダー、そして影などをスタイルシートで定義出来るようになります。

【背景】

background-clip

背景の適用範囲を指定できます。

表示例
※同じ背景を使っています

border-box:
背景をボーダーボックスに適用する（初期値）

padding-box:
背景をパティングボックスに適用する

content-box:
背景をコンテントボックスに適用する

background-origin

背景の基準位置を指定できます。

表示例
※同じ背景を使っています

padding-box:
背景をパディングボックスに対して相対的に適用する（初期値）

border-box:
背景をボーダーボックスに対して相対的に適用する

content-box:
背景をコンテントボックスに対して相対的に適用する

background-size

背景画像のサイズを指定できます。

表示例
※同じ背景を使っています

auto:
自動的に算出される（初期値）

contain:
縦横比は保持して、背景領域に収まる最大サイズになるように背景画像を拡大縮小する

cover:
縦横比は保持して、背景領域を完全に覆う最小サイズになるように背景画像を拡大縮小する

サイズ:
背景画像の幅・高さを指定する
例) 幅100px 高50px

パーセンテージ:
背景領域に対する背景画像の幅・高さのパーセンテージを指定する
例) 幅100% 高100%

【角丸】

border-radius

ボックスの４つのコーナーの角丸を指定できます。
左上（border-top-left-radius）、右上（border-top-right-radius）、右下（border-bottom-left-radius）、左下（border-bottom-right-radius）の順で指定します。
()内は個別に指定する場合

表示例

( 左上 右上 右下 左下 ) : ( 20px 0px 30px 10px )

【画像ボーダー】

border-image

ボーダーを画像で指定できます。
画像ファイル(border-image-source)、使用範囲(border-image-slice)、幅(border-image-width)、ボーダーイメージエリア(border-image-outset)、繰り返し方法(border-image-repeat)の順で指定します。
()内は個別に指定する場合

表示例

15pxの幅で、イメージを指定。

【影】

box-shadow

ボックスに影を指定できます。
影の水平オフセット、垂直オフセット、ボカシ距離、広がり距離、色の順で指定します。

表示例

15pxの幅で、イメージを指定。

CSS3から、要素の変形(2D/3D)などをスタイルシートで定義出来るようになります。

【変形】

transform

要素の表示位置や傾きなどを変形することができます。

表示例

translate():要素を移動させます。(わざとはみ出ています)
translateX(),translateY()など単方向の指定も出来ます。

scale():要素を拡大・縮小させます。
scaleX(),scaleY()など単方向の指定も出来ます。

rotate():要素を回転させます。
rotateX(),rotateY()など単方向の指定も出来ます。

skew():要素を傾斜させます。
skewX(),skewY()など単方向の指定も出来ます。

CSS3から、Javascriptを使用せずスタイルシートだけで時間変化を定義出来るようになります。
但し、2011年6月現在 対応しているブラウザはApple SafariとGoogle Chromeだけです。

【時間的変化】

transition

要素に時間変化の効果を与えるすることができます。
変化対象(transition-property)、 変化している時間(transition-duration)、 変化の進行具合(transition-timing-function)、 変化開始遅延(transition-delay)の順で指定します。

表示例

マウスカーソルが乗ると背景色と文字色が変化します
※SafariかChromeで確認ください。

CSS3から、Javascriptを使用せずスタイルシートだけでアニメーションを定義出来るようになります。
但し、2011年6月現在 対応しているブラウザはApple SafariとGoogle Chromeだけです。

【アニメーション】

animation

要素に時間変化の効果を与えるすることができます。
アニメーション名(animation-name)、 変化している時間(animation-duration)、 変化の進行具合(animation-timing-function)、 変化開始遅延(animation-delay)、 繰り返し回数(animation-iteration-count)、交互に反転再生させるか(animation-direction)の順で指定します。

表示例

幅と文字色が変化します
※SafariかChromeで確認ください。

CSS3から、透過色を定義出来るようになります。

【透過色】

opacity

要素自体に透過を指定することができます。

表示例

このボックスが透けます

rgba()

カラーモデルで透過を指定することができます。

表示例

この文字だけ透けます

CSS3から、グラデーションを定義出来るようになります。

【グラデーション】

linear-gradient()

線形グラデーションを指定することができます。

表示例

線形グラデーション

radial-gradient()

円形グラデーションを指定することができます。

表示例

円形グラデーション

これまで段組を行うためには、floatを使用していました。
CSS3から、float以外の方法で段組を定義出来るようになります。

【文書の段組の数と幅】

columns

段組するカラム数と幅を指定することが出来ます。
カラム幅(column-width)、 カラム数(column-coun)の順で指定します。
但し、2011年6月現在 対応しているブラウザはApple SafariとGoogle Chromeだけです。

表示例

段組の例を示します。

段組をするために、今まではtableを使うか、div+floatを使ってきました。
但し、一括して指定できるのは2011年6月現在 対応しているブラウザはApple SafariとGoogle Chromeだけです。

段組をするためには...

【カラムの間隔と区切り線】

column-gap

段組するカラム間の間隔を指定することが出来ます。

表示例

段組の例を示します。

段組をするために、今まではtableを使うか、div+floatを使ってきました。
しかし、CSS3からはテキストの段組をするためのプロパティが追加されました

段組をするためには...

column-rule

段組するカラム間の区切り線を指定することが出来ます。
線幅(column-rule-width)、 線種(column-rule-style)、 線色(column-rule-color)の順で指定します。

表示例

段組の例を示します。

段組をするために、今まではtableを使うか、div+floatを使ってきました。
しかし、CSS3からはテキストの段組をするためのプロパティが追加されました

段組をするためには...

CSS3から、テキストの表現をより豊かに表現する定義が出来るようになります。
新しいテキストのプロパティは多々ありますが、その代表的なものを紹介します。

【文字の影】

text-shadow

テキストに影をつける指定することが出来ます。
水平距離、垂直距離、ぼかし半径、色の順で指定します。

表示例

文字に影がつきます(20px 5px 0px red)
絵でないことをマウスカーソルを当てて確認してください。(5px 5px 2px darkblue)

CSS3から、ブラウザで任意のフォントを定義が出来るようになります。
これを「Webフォント」と言います。

【フォントの指定】

@font-face

フォントファイルの指定することが出来ます。
※フォントの著作権、利用条件等を確認してご利用ください。

表示例

「しねきゃぷしょん」(chiphead氏作)を利用しています。

CSS3では、多くのセレクタ(宣言名)も多く追加されています。

【属性セレクタ】

E[foo^="bar"]

前方一致

E[foo$="bar"]

後方一致

E[foo*="bar"]

部分一致

【疑似クラス】

E:root

ルート要素

E:nth-child(n)

n番目の子要素

E:nth-last-child(n)

最後からn番目の子要素

E:nth-of-type(n)

n番目の兄弟要素

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

最後からn番目の兄弟要素

E:last-child

最後の子要素

E:first-of-type

最初の兄弟要素

E:last-of-type

最後の兄弟要素

E:only-child

唯一の子要素

E:only-of-type

唯一の兄弟要素

E:empty

子(テキストを含む)を持たない要素

【ターゲット疑似クラス】

E:target

アンカーで飛んだ先の要素

【状況疑似クラス】

E:enabled

要素のスタイルが有効になっている状態の時

E:disabled

要素のスタイルが無効になっている状態の時

E:checked

チェックされている時
※チェックボックスやラジオボタンなど

【否定疑似クラス】

E:not(s)

sとは一致しない要素

【間接セレクタ】

E~F

Eの次に表れるF要素

CSS3では、多様なデバイス、表示環境に対応するため「Media Queries」という仕組みが用意されています。
表示媒体のサイズやアスペクト比、カラー表示の可否などscreenやprintなどのMedia Typeだけでは表現できない場合にも対応出来るようになりました。
特にスマートフォンやスマートTVなどにスタイルを適用するために役立ちます。

@media screen {
	div {
		border : 1px solid blue;
	}
}

@media screen and (max-width : 640px) {
	div {
		border-color : red;
	}
}