css3 のいくつかの新機能

background:rgba(254, 255, 200, 0.75);

たとえば、上記のコードに示すように、最初の 3 つのパラメーターはそれぞれ R、G、B の 3 原色であり、範囲は 0- 255. 4 番目のパラメータは背景の透明度で、0 ～ 1 の範囲で指定します。たとえば 0.5 は 50% の透明度を表します。この属性により、ブラウザで Win7 のような半透明のガラス効果を実現できます。

CSS3丸い角のサンプルコード/*firefox構文*-moz-border-radius：6px 6px 6px; -border-radius-topleft: 6px;

-moz-border-radius-bottomright: 6px;

/*WebKit コアブラウザ構文*/

- webkit-border-radius: 6px 6px 6px 6px;

-webkit-border-top-right-radius: 6px;

-webkit-border-bottom - right-radius: 6px;

-webkit-border-bottom-left-radius: 6px;

/*CSS 標準構文*/

border-radius:6px 6px 6px 6px;

border-top-right -radius: 6px;

border-top-left-radius: 6px;

border-bottom-left-radius: 6px; 4 つの角の効果は、border-radius: 6px 6px 6px 6px というコード行で指定できます。4 つのパラメータは、左から右に、左上隅、右上隅、右下隅、左下隅を表します。 border-top-right-radius: 6px; のように、各コーナーの効果を個別に指定することもできます。

グラデーションカラー

background: -moz-linear-gradient(

center top,/* グラデーション開始の座標*/

rgba(254, 216, 80, 0.75),/*グラデーション開始色 */

rgba(230, 125, 30, 0.75) 50%,/* 中間グラデーション色*/ www.2cto.com

rgba(254, 235, 121, 0.75)/* グラデーション終了色* / ) 繰り返しスクロール 0 0 透明;

上記のコードに示すように、Mozilla は線形グラデーションを表すために -moz-linear-gradient タグを使用します。最初のパラメーターは、グラデーションが開始する座標を表します。これは、座標値、または上、下、左、右、中央などの値にすることができます。以下のパラメータはグラデーションの色の値であり、数に制限はなく、カンマで区切られます。各カラー値は、通常の 16 進カラーまたは RGBA カラー値にすることができます。各色の後にパーセンテージまたは 0 ～ 1 の間の小数を続けることもでき、グラデーション全体におけるその色の割合を示します。

Webkit グラデーション構文

background:-webkit-gradient(

linear,/* グラデーションの種類線形*/

左上,/* グラデーションが始まる座標*/

左下, /* グラデーションの終わりの座標*/

from(rgba(254, 216, 80, 0.75)),/* グラデーションの開始色*/

to(rgba(254, 235, 121, 0.75)),/* グラデーションの終了色*/

color-stop(0.5,rgba(230, 125, 30, 0.75))/* グラデーションの中間色*/

)

スクロールを繰り返す 0 0 透明

Webkit ブラウザは -webkit を使用します -gradient 属性はグラデーションを表します。最初のパラメータはグラデーションのタイプで、通常は線形です。 2 番目のパラメータは、Mozilla の最初のパラメータと同じ、グラデーションが開始する座標です。 3 番目のパラメーターは、グラデーションの終点の座標です。 4 番目と 5 番目はそれぞれグラデーションの開始色と終了色で、16 進数のカラー値または RGBA カラー値を指定できます。最初の 5 つのパラメータの後にカンマで区切られた最終的なカラーストップ属性を無限に指定でき、変更の途中でのグラデーション カラーを示します。 color-stop アトリビュートでは、最初のパラメータはグラデーション カラーの割合で、0 ～ 1 の 10 進数またはパーセンテージを指定できます。2 番目のパラメータはグラデーションのカラー値で、16 進数のカラーも指定できます。値または RGBA カラー値。

Transform

Transform は、線形カラー グラデーションに次ぐ CSS のもう 1 つの大作です。通常、CSS と HTML を使用すると、HTML 要素を特定の角度で回転したり傾けたりすることはできません。要素をより立体的に見せるためには、この効果を画像に変換する必要がありますが、これにより多くの動的なアプリケーション シナリオが制限されます。 Transform 属性の導入により、通常は SVG などのベクター描画方法に頼らなければならなかった機能を、単純な CSS 属性だけで実現できるようになります。 CSS3 では、Transform プロパティには主に、回転回転、スケール スケーリング、平行移動座標変換、スキュー座標傾斜、およびマトリックス マトリックス変換が含まれます。各属性がどのように使用されるかを見てみましょう。

/*Webkit コアブラウザ*/

-webkit-transform: 回転(-90deg);

-webkit-transform:scale(2); );

-webkit-transform: 変換(10px, 20px);

-webkit-transform: 行列(1, -0.2, 0, 1, 0); , 0);

/*Firefox ブラウザ*/

-moz-transform: 回転(-90deg);

-moz-transform:

-moz-transform: スケール(2, 1);

-moz-transform: 変換(10px, 20px);

-moz-transform: 行列(1, -0.2, 0, 1, 0, 0);

/*Opera ブラウザ*/

-o-transform: 回転(-90deg);

; -o-transform: スケール(2, 1);

-o-transform: 変換(10px, 20px);

-o-transform: 行列 ( 1, -0.2, 0, 1, 0, 0);

回転属性コードと回転角度パラメーターは非常に単純で、45deg は時計回りに 45 度の回転を表します。反時計回りに 45 度回転すると -45 度になります。

回転と同様に、スケーリング属性は、scale キーワードとスケーリング パラメータによって実装されます。パラメータが 2 の場合は、HTML 要素の X 軸方向と Y 軸方向を同時に 2 倍に拡大し、0.5 の場合は同時に 1/2 に縮小することを意味します。パラメータ2と3が同時に2つある場合は、HTML要素のX軸方向を2倍、Y軸方向を3倍に拡大することを意味します。

名前が示すように、座標変換属性は HTML 要素を X 軸方向と Y 軸方向にピクセル数だけ変換するもので、translate 属性によって実装されます。後の 2 つのパラメータは、それぞれ X 軸と Y 軸への移動量を表します。

skew プロパティも便利な変換関数で、X 軸と Y 軸を中心に特定の角度でオブジェクトを傾けることができます。これは、回転の回転とは異なります。回転は HTML 要素の形状を変更せずに回転するだけですが、スキューは HTML 要素の形状を変更します。 skew には 2 つのパラメータがあり、X 軸と Y 軸に沿った HTML 要素の傾きを表します。

行列、そのとおりです。これは通常の行列変換です。この変換は、解析幾何学で学んだ座標系変換です。 6つのパラメータ（a、b、c、d、e、f）を持ち、座標変換の変換行列を表す3×3の行列です。これを使用すると、あらゆる座標系変換を柔軟に完了できます。興味のある友人は、大学の解析幾何学の教科書、または W3c の SVG での行列の変更の定義と説明を確認してください。

現在、これらの 5 つの変換属性をサポートしているブラウザは、Safari 4 以降、Chrome 5 以降、Firefox 3.5 以降、および Opera 10.5 以降です。IE ブラウザ シリーズ全体では、この属性はサポートされていません。