css3_html/css_WEB-ITnose の新しいスタイルの紹介

PC バージョンの開発では IE を使用するため、css3 を使用することはほとんどありませんが、タブレットやスマートフォンが私たちの生活に浸透し、ますます人気が高まっているため、モバイルの開発に大胆に取り組むことができ、タブレットバージョンが使用されているため、いくつかについて説明します一般的に使用される CSS3 属性:
1. CSS3 プレフィックスの使用の概要、例を直接見てみましょう:

Java コード

-webkit-transform:rotate(-3deg); / / Webkit の場合Chrome や Safari などのブラウザー
-moz-transform:rotate(-3deg); // Firefox ブラウザーの場合
-ms-transform:rotate(-3deg); // IE ブラウザーで使用されます
-o; -transform:rotate(-3deg); // Opera ブラウザで使用されます
transform:rotate(-3deg); ss3 属性に関して最初に思い浮かぶのは、CSS2 では非常に面倒なためです。小さな画像を切り取ってつなぎ合わせたり、多くの CSS コードを制御したり、互換性を考慮したりする必要がありますが、CSS3 以降では、「border-radius」属性を使用する限り、角を丸くすることができます。簡単な例:

Java コード

border-radius:5px; /最初の左隅とフィレットの半径の長さを 5px に設定します。他の用途についてはマニュアルを参照してください。これは非常に簡単です。使用

3. シンプルな影 Web ページの要素に影を追加する方法を説明します。影効果はとても簡単に始めることができます。次のコード スニペットは、わずかに回転して影のある画像を示しています。両方の効果は CSS を使用して追加されています。

Java コード

上記のコードでは、transform CSS プロパティは画像の回転を実装し、box-shadow プロパティは画像に影効果を追加します。回転角度や影のパラメータを変更し、それらのパラメータを調整するだけです。

試してみると、以下に示す回転画像効果が表示されます。

1. box-shadow は 6 つのパラメータを設定できます: ①: 最初の長さの値は、オブジェクトのシャドウの水平オフセット値を設定するために使用されます。負の値も指定できます ②: 2 番目の長さの値は、オブジェクトの影の垂直オフセット値を設定するために使用されます。負の値も可能です ③: 3 番目の長さの値が指定されている場合、オブジェクトのシャドウ ブラー値を設定するために使用されます。負の値は許可されません ④: 4 番目の長さの値が指定された場合、オブジェクトのシャドウ拡張値の設定に使用されます。負の値は許可されません : オブジェクトの影の色を設定します。 inset: オブジェクトのシャドウ タイプをインナー シャドウに設定します。値が空の場合、オブジェクトの影のタイプは外側の影です 4. 要素の変換 影の概要で変換の使用について説明しました。画像の上でマウスをスライドさせて例を見てみましょう。 :

   
   Java コード
   
   
   
   
   

   以下に示すように、画像の上にマウスを置くと、画像がポップアップして拡大されます。
   マウスを画像から遠ざけると、画像は元の状態に戻ります。
   変換の各パラメータの意味を見てみましょう:
   Java コード
   1. transform:translate(10px,10px) //要素は水平方向と垂直方向に 10 ピクセル移動します
   2. transform:rotate(10deg) //要素は 10 度回転します
   3. transform:scale(2) //要素は拡大されます Double
   4. transform:skew(10deg,10deg) //この要素は、X 軸と Y 軸の 10 度の斜め歪みに対応します

   
   次のセクションでは、アニメーション (トランジション) とグラデーションの使用について説明します。 (グラデーション)