CSS3は本当にFirefoxの、SafariやGoogle ChromeのによってサポートされているCSS3のワーキングドラフトに記載されているコマンドの多くで勢いを収集し始めている。 我々は、我々のお気に入りのいくつかを一緒にしようと思いました。 説明を始める前に、それらが動作するには、CSS3のコマンドは、ブラウザ固有の構文が必要になります。

Mozilla Firefoxの場合我々は、例えば、 の- moz -接頭辞を使用する必要があります。

- moz - border - radiusで：

とSafariの市販の- webkit -接頭語のため、例えば：

の- webkit - border - radiusで：

1。 国境の半径

CSS3のボーダーradiusコマンドは、要素に湾曲した角を作成します。 代わりに作成する4以上の画像を使用しての湾曲したコーナーでは、次のコマンドを使用します。

Mozilla Firefox用/ * * /
- moz - border - radiusで：20px;

サファリ＆Google Chromeのための/ * * /
の- webkit - border - radiusで：20px;
}

2。 ボックスの影

影はCSS3ボックスの影のコマンドを使用して要素に適用することができます。 ボックスの影には、3つの数値に加えてこの効果を適用する色を受け入れます。 これらの番号は、次のとおりです。

1。 影のオフセット、水平の距離 - 正の値は、影が右と左に負の値にキャストすることを意味します
2。 影の垂直方向のオフセットの距離 - 正の値は影が下にキャストして、上記の負の値を意味します
3。 どのようにぼやけて、影をしたいと思います

色の値を追加して影は完了です。

Mozilla Firefox用/ * * /
の- moz -ボックス - 影：5PX 5PX 5PX＃b6ebf7。

サファリ＆Google Chromeのための/ * * /
の- webkit -ボックス - 影：5X 5​​PX 5PX＃b6ebf7。

3。 透明またはRGBA

透明度は常にトリッキーされています。 別のブラウザでは、歴史的に異なるコマンドを使用して透明度を適用している。 このクロスブラウザの矛盾を継続して我々は新しいCSS3のRGBAの背景プロパティの追加を持っている、しかし、原理的には、このコマンドは、より論理的です。 コマンドは4つの値で構成されています - は、最初の2番目と3番目、赤、緑＆青の値（0-255）は、それぞれアルファチャンネルまたは透明度（0-1）に続いています。

RGBAのコマンド用のブラウザ固有の接頭辞（の- moz -、- webkitの - ）は不要です。

＃BOX3 {
背景色：RGBA（110、142、185、0.5）;
}

背景色のコマンドは、CSS3のRGBAのプロパティを理解するブラウザでの0.5または50％の不透明度で良い青灰色の背景が追加されます。

残念ながら、Internet Explorerでは、背景色のコマンドをレンダリングするために試みますが、RGBAを理解しません。 背景色はまた、IEでIE専用のハックを設定されていることを確認しておく必要があります。 次の例では：Explorerが理解していないインターネットの最後の- child擬似セレクタは、それを除外するために使用されます。

ボディ：最後の子＃BOX3 {
/ *使用して、すべてのIEのブラウザ除外：最後の子を* /
背景色：RGBA（110、142、185、0.5）が重要。
}

4。 カラム

列を追加する機能は、CSS3に追加されました。 むしろ、コンテナ内の浮動要素よりも我々は、列番号、幅とルールを設定することができます。

Mozilla Firefox用/ * * /
の- moz -カラムカウント：2;
の- moz -カラムギャップ：20px;
の- moz -コラム - ルール：1pxの実線＃6e8eb9。

サファリ＆Google Chromeのための/ * * /
の- webkit -カラムカウント：2;
の- webkit -カラムギャップ：20px;
の- webkit -コラム - ルール：1pxの実線＃6e8eb9。
}

5。 複数の背景画像

それはあなたが唯一の要素ごとに1つの背景画像を適用することができるという事実のためにCSSに来るときの背景画像は常に制限されています。 これは、単にそれらをカンマで区切ることにより、要素ごとに複数の画像を可能にするCSS3とそうではありません。

あなたが少しスタイリングで、次のコマンドを使用することができる要素の左と右の両方に画像を配置するには：

パディング：0 20px;
}

このコマンドは、それが単一の要素で2背景画像を受け付けないようにInternet Explorerが誤ってレンダリングされます。 すべてのIEのハックが必要な場合は除外。

＃box5 BLOCKQUOTE {
すべてのブラウザでは/ *、ちょうど開いた引用* /
背景：URL（/ i /をquotel.gif）0 0ノー繰り返し;
パディング：0 20px;
}

ボディ：最後の子＃box5 BLOCKQUOTE {
/ *使用して、すべてのIEのブラウザ除外：最後の子を* /
/ *その後、二つの画像* /
背景：URL（/ i /をquotel.gif）ノー繰り返し0 0、URL（/ i /をquoter.gif）ノー繰り返し100％0;
}

6。 背景のグラデーション

CSS3背景のグラデーションは、非常に柔軟で、複雑なパターンを作成するために使用することができます。 簡単に言うとCSSの線形勾配は、勾配が上から下への要素に適用され、左から右にすることができます。

Mozilla FirefoxでCSS3のグラデーションのこの例では、ボックスの"高さの20％だけのためにボックスの下部にあるライトブルーのグラデーションを適用します

Safariはカラーストップの値を使用して以下の直感が、より柔軟なアプローチを採用しています。 Safariの特定のコードの例は、（線形ではなく外側の括弧に含まれていることに注意）、次のとおりです。

＃box8 {
背景：- webkitの勾配（線形、左下、左、上、カラーストップ（0、＃b6ebf7）、カラーストップ（0.20、＃FFF））;
}

7。 回転

CSS3はまた、回転のプロパティは、パラメータとして学位を受け入れると、変換コマンドを使用して、要素の回転を可能にします。

の<code>＃box9 {
の- moz -変換：回転（2DEG）;
の- webkit -変換：回転（2DEG）;
} </ code>を

8。 アウトライン

OutilinesはCSS3の仕様に含まれており、単一の要素に適用する境界線と輪郭の両方を許可されています。

アウトラインプロパティは、borderコマンドと同じです。 追加のoffsetプロパティは、しかし、国境がさらに内側または要素の外側に移動することができます。

下でファイルされる： CSSの管理者によって