CSS3で追加されたプロパティ一覧

CSS3とは

CSS3とは従来のCSSに新たな仕様を加えた規格のことです。
古いバージョンとの互換性もあるので特に意識することなく使うことができます。

CSS3で追加されたプロパティ

グラデーション

要素の背景に上から下方向へ黒から白になるグラデーション

background-image:linear-gradient(top, #000, #FFF);

変形(2D)

要素を180度回転

transform: rotate(180deg);

角丸

要素の四隅を半径10pxの角丸にする

border-radius:10px;

透過

要素を50%透過

opacity:0.5;

ボックスレイアウト

div要素の直下の子要素を横並びにする

display:box;

ボックスシャドウ

要素の右1px、下1pxの位置に3pxの黒の影を指定

box-shadow:1px 1px 3px #000;

テキストシャドウ

要素内の文字の右1px、下1pxの位置に3pxの黒の影を指定

text-shadow:1px 1px 5px #000

段組

要素の内容を3個の段組みにする

column-count:3;

アニメーション

a要素の背景色を1秒間かけて変化させる

transition:background-color 1.0s ease;

複数背景

要素の背景に複数の背景を指定

background-image: url(bg1.png), url(bg2.png)