css3の新しい属性とは何ですか

css3 の新しいプロパティには、word-wrap、word-break、text-shadow、border-radius、box-shadow、border-image、background-size、transform、transition などが含まれます。

このチュートリアルの動作環境: Windows 7 システム、CSS3 バージョン、Dell G3 コンピューター。

css3 の新しい属性

1. CSS3 テキスト効果:

• hanging-punctuation: 句読点文字をワイヤーフレームの外側に配置するかどうかを指定します。
  

• punctuation-trim: 句読点文字をトリムするかどうかを指定します。

• text-align-last: 最後の行または強制改行の直前の行を揃える方法を設定します。

• text-emphasis: 強調マークと強調マークの前景色を要素のテキストに適用します。

• text-justify: text-align が「justify」に設定されている場合に使用される配置方法を指定します。

• text-outline: テキストのアウトラインを指定します。

• text-overflow: テキストが含まれている要素からオーバーフローした場合に何が起こるかを指定します。

• text-shadow: テキストに影を追加します。

• text-wrap: テキストの行折り返しルールを指定します。

• word-break: 中国語、日本語、韓国語以外のテキストの改行ルールを指定します。

• word-wrap: 分割できない長い単語を分割して次の行に折り返すことができます。

2. CSS3 境界線:

• border-radius: CSS3 の丸い境界線。

• box-shadow: ボックスに影を追加するために使用されます。

• border-image: CSS3 境界線イメージ。画像を使用して境界線を作成できます。

3. CSS3 背景:

• background-size: 属性は背景画像のサイズを指定します。

• background-origin: この属性は、背景画像の配置領域を指定します。

• background-clip: 背景の描画領域を指定します。

(学習ビデオ共有: css ビデオ チュートリアル)

4. CSS3 変換:

• transform 2D または 3D 変換を要素に適用します。

• transform-origin を使用すると、変換される要素の位置を変更できます。

• transform-style は、ネストされた要素を 3D 空間で表示する方法を指定します。

• perspective 3D 要素の遠近効果を指定します。

• perspective-origin は、3D 要素の下部の位置を指定します。

• backface-visibility 要素が画面に向かっていないときに表示されるかどうかを定義します。

5. CSS3 トランジション:

あるスタイルから別のスタイルに変換するときに要素にエフェクトを追加します。

• transition: 短縮形の属性。1 つの属性に 4 つの遷移属性を設定するために使用されます。

• transition-property: トランジションを適用する CSS プロパティの名前を指定します。

• transition-duration: トランジション効果にかかる時間を定義します。デフォルトは 0 です。

• transition-timing-function: トランジション効果の時間曲線を指定します。デフォルトは「簡単」です。

• transition-lay: トランジション効果がいつ開始されるかを指定します。デフォルトは 0 です。

6. CSS3 アニメーション: CSS3 を使用すると、多くの Web ページのアニメーション画像、Flash アニメーション、JavaScript を置き換えることができるアニメーションを作成できます。

• @keyframes: アニメーションを指定します。

• animation:animation-play-state プロパティを除く、すべてのアニメーション プロパティの短縮形プロパティ。

• animation-name: @keyframes アニメーションの名前を指定します。

• animation-duration: アニメーションが 1 サイクルを完了するのにかかる秒数またはミリ秒数を指定します。デフォルトは 0 です。

• animation-timing-function: アニメーションの速度カーブを指定します。デフォルトは「簡単」です。

• animation-delay: アニメーションの開始時期を指定します。デフォルトは 0 です。

• animation-iteration-count: アニメーションの再生回数を指定します。デフォルトは 1 です。

• animation-direction: 次のサイクルでアニメーションを逆再生するかどうかを指定します。デフォルトは「通常」です。

• animation-play-state: アニメーションが実行中か一時停止かを指定します。デフォルトは「実行中」です。

• animation-fill-mode: オブジェクトのアニメーション時間外の状態を指定します。

7. CSS3 複数列:

• column-count: 要素を表示する列の数を指定します。スプリット。

• column-fill: 列の塗りつぶし方法を指定します

• column-gap: 列間のギャップを指定します

• column-rule: すべての column-rule-* 属性の省略形

• ##column-rule-color: 2 つの列の間の境界線の色を指定します

• column-rule-style: 2 つの列間の境界線のスタイルを指定します。

• column-rule-width: 2 つの列間の境界線の太さを指定します

• column-span: 要素がまたがる列数を指定します。

• column-width: 列の幅を指定します

• columns: 列幅と列数を設定するための省略形

8. CSS3 ユーザー インターフェイス:

• resize: この属性は、ユーザーが要素のサイズを変更できるかどうかを指定します。

• box-sizing: プロパティを使用すると、特定のコンテンツを特定の領域にどのように適合させるかを正確に定義できます。

• outline-offset: プロパティはアウトラインをオフセットし、境界線の端を越えてアウトラインを描画します。

• 外観: 要素を標準のユーザー インターフェイス要素のように見せることができます。

• icon: 作成者が要素をアイコンに相当するものに設定できるようにします。

• nav-down: 下矢印ナビゲーション キーを使用するときに移動する場所を指定します。

• nav-index: 要素のタブの順序を指定します。

• nav-left: 左矢印ナビゲーション キーを使用して移動する場所を指定します。

• nav-right: 右矢印ナビゲーション キーを使用して移動する場所を指定します。

• nav-up: 上矢印ナビゲーション キーを使用するときに移動する場所を指定します。

プログラミング関連の知識について詳しくは、プログラミング ビデオ

以上がcss3の新しい属性とは何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。