CSS3シリーズ3（背景枠、変形処理、アニメーション効果に関するスタイル）_html/css_WEB-ITnose

背景に関連する新しい属性

HTML ページでは、要素が次の部分で構成されていることは誰もが知っています

border -box に設定されている場合は、background-clip を使用して背景の表示範囲を変更します。背景範囲にはボーダー領域が含まれます。padding-box に設定されている場合、背景範囲にはボーダーは含まれず、パディング領域も含まれます。 content-box に設定すると、背景にはコンテンツ領域のみが含まれます

background-origin 属性: 背景画像の描画の開始点を指定します。その属性値は、background-clip と同じです。つまり、その仕様に従って描画できます。境界線の左上隅から開始する場合、またはコンテンツの左上隅から開始する場合

(background-clip はパディングボックスとして指定できますが、background-origin 属性を次のように指定できることに注意してください)ボーダーボックスから指定します。ボーダーの左上隅から描画を開始します)

background-size: 背景画像のサイズを指定します (1. 画像の縦横比を維持したい場合は、別のサイズを設定できます)画像の幅と高さを設定するときにパラメータを auto 2 に設定します。幅と高さを指定するときは、パラメータとしてパーセンテージ値を使用できます)

CSS3 では、ユーザーが要素に複数の背景 (つまり、複数の背景) を設定できます。 、要素に複数の背景画像をカンマで区切って指定します) )

background: url(front.png) repeat-x 300% 0, url(mid.png) repeat-x 70% 0, url(back.gif) repeat-x -10% 0;

ここでは、複数の指定を許可し、複数の画像ファイルで使用できる属性について、次のように特別に説明します。

border-radius を使用する丸みを帯びた境界線を描くには、誰もがよく知っていると思いますが、以下に示すように、border のように個別に記述することができます。使い方はとても簡単です

上記のABCDの具体的な意味は下図の通りです 表現:

border-image属性値にこれら4つのパラメータを指定した場合、ブラウザはどのように画像を分割するのでしょうか次の図に示すように、境界線に使用されます。

具体的な意味は次のとおりです

同様に、border-image 属性の境界線の幅を指定できます

境界線の幅を指定できるだけでなく、 , 画像の表示方法を指定することもできます

transform の構文 比較的単純ですが、現在、各ブラウザは独自のメソッドのみをサポートしています。

            border-top-left-radius:1px;            border-top-right-radius:2px;            border-bottom-left-radius:3px;            border-bottom-right-radius:4px;

注: 最後の行は、現在すべてのブラウザでサポートされているわけではありませんが、非常に重要です。主な理由は、将来の互換性を考慮し、メンテナンスコストを削減するためです。

詳しく説明しましょう

scaleはテキストまたは画像のスケーリングを実装し、パラメータでズーム率を指定します

skewはテキストまたは画像の傾きを実装し、水平方向と垂直方向の傾き角度を指定しますパラメータで（2つのパラメータに対してパラメータを1つだけ指定した場合は、垂直方向の処理は行わずに水平方向のみ傾きます）

テキストや画像を移動する方向を変換し、パラメータで水平方向を指定します上方向の移動距離と垂直方向の移動距離 (スキューと同様、パラメーターを 1 つだけ指定した場合、垂直方向の処理は行われません)

変形メソッドを使用してテキストや画像を変形する場合、要素の中心点単純な変更の場合、CSS3 は、transition 属性を使用して動的なトランジション効果を実現できます。

-webkit-transform:rotate(10deg);-moz-transform:rotate(10deg);-o-transform:rotate(10deg);transform:rotate(10deg);

もちろん、トランジション関数を使用して複数の属性値を同時に滑らかにすることもできます
現在、より複雑なアニメーションは、Webkit プラットフォームのキーフレームを通じて完成させることができます。
えー
同時に、トランジションと同様に、複数の属性を同時に変更するアニメーションを実装したい場合は、これらの属性値を各キーフレームに同時に指定するだけで済みます

アニメーションの実装にどのようなメソッドが利用できるかを見てみましょう

ここで強調したいのは、js は webkitTransitionEnd イベントをリッスンすることでアニメーション終了メッセージを簡単に取得し、対応する操作を実行できるということです