css3 にはどのような新しい属性スタイルが追加されますか?よく使用される css3 の新機能の紹介-CSSチュートリアル-php.cn

css3 にはどのような新しい属性スタイルが追加されますか?よく使用される css3 の新機能の紹介

青灯夜游

リリース： 2018-10-08 11:07:11

オリジナル

3674 人が閲覧しました

css3 の新しい属性スタイル (新機能) は何ですか?この章では、CSS3 で一般的に使用されるいくつかの新しい属性スタイル (新機能) を紹介することに焦点を当てます。困っている友人は参考にしていただければ幸いです。

CSS3 の新しい属性スタイル (新機能) を紹介する前に、まず CSS3 とは何かを知る必要があります。

CSS は Cascading Style Sheets の略です。
CSS は、ブラウザーで解釈されるマークアップ言語であり、コンパイルせずにブラウザーで直接実行できます。
CSS は、HTML または XML を表現するために使用されるマークアップ言語です。
CSS は、W3C CSS Working Group によって推奨および保守されています。
CSS はプログラミングの初心者にとって必須のコースです。CSS スタイルを使用すると、ページを美しくすることができます。
CSS 構文は、セレクター、プロパティ、値の 3 つの部分で構成されます (例: selector {property: value})。

CSS3 は最新の CSS 標準であり、いくつかの新しい属性スタイルが追加されており、これは新機能です。以下では、css3 でよく使用されるいくつかの新機能 (属性スタイル) を紹介します:

1. Border

border-image 属性: これは短縮属性であり、すべての border-image-* 属性の短縮属性を設定するために使用されます。

border-radius 属性: これは、4 つの border-*-radius 属性を設定するために使用される省略形の属性です。

border-top-left-radius 左上隅を設定します
border-top-right-radius 右上隅を設定します
border-bottom-right-radius 左下隅を設定します
border-bottom-right -radius 右下隅を設定します
border-top-left-radius: x y; x は左上隅の x 軸オフセットを表し、y は y 軸オフセットを表します。パーセンテージとピクセルを設定します。

境界半径:;
1 つの値は左上、右上、左下、右下を表し、すべて
2 つの値は最初の値の左上と右下を表します 2 番目の値は右上と左下を表します
3 つの値は次を表します。最初の値は左上、2 番目の値は右上と左下、3 番目の値は右下
、4 つはそれぞれ左上、右上、右下、左下です。

border-radius 0 0 0 0/ 0 0 0 0;
最初の 4 つは 4 つの x 方向の x 軸オフセットであり、最後の 4 つは y 軸方向のオフセットです

box-shadow プロパティ: ボックスに 1 つ以上の影を追加します。

構文: box-shadow: 値
値の説明:
(1) 最初の値: Npx、影は水平方向に N ピクセルずつオフセットされます。正の数は右に、負の数は左に移動します。 (2) 2 番目の値: Npx、影は垂直方向に N ピクセルだけオフセットされます。正の数は下に、負の数は上に進みます
(3) 3番目の値：フェザーサイズ（ぼかしサイズ）
(4) 4番目の値: 影のサイズ
(5) 5 番目の値: color デフォルト値は黒です。 (6) 6 番目のパラメータ: 内側のシャドウと外側のシャドウ。デフォルトは外側のシャドウです。内側のシャドウは inset
です。 (7) シャドウはカンマ区切りで複数記述できます
(8) シャドウは省略できますが、一部の値は 0 で埋める必要があることに注意してください。

包括的な例:

p{
    border: 2px solid red;
    border-radius:25px; /* 创建圆角，100%为圆形 */
    box-shadow: 10px 10px 5px #888888；
}

ログイン後にコピー

2. 背景

background-size 属性

: 背景画像のサイズを指定します。 (重要な属性) 構文:background-size:value

値の説明:

(1) 値が 1 つだけの場合、幅は引き伸ばされ、高さはピクセルまたはパーセントをサポートします。

(2) 値が 2 つある場合、幅と高さはそれぞれ対応する値に引き伸ばされ、ピクセルまたはパーセントをサポートできます。パーセンテージはボックス自体の幅と高さを指します##。 # (3) 含む画像の幅または高さが拡大縮小時にボックスの端に「接触」すると、変更が停止します (幅または高さはどちらか一方を満たす必要があります)
(4) 包含に基づいて、空白スペースがないことを確認します。これはカバーの効果です (幅と高さの両方を満たす必要があります)

background-origin 属性

:背景画像の配置範囲を指定します。

構文:background-origin:value

値の説明:
(1) border-box: 境界線を無視し、境界線の開始点 0、0 point

から直接タイルします。 (2) パディングボックス: デフォルト値、パディングを無視し、パディングの開始点から直接タイル化します 0、0 point

(3) content-box: タイリングはコンテンツ部分から開始され、パディングに関連します。

background-image 属性

: 要素の背景画像を設定します。

background-repeat 属性

: 背景画像を繰り返すかどうか、どのように繰り返すかを設定します。

3. テキスト効果

text-align-last 属性: 最終行または強制行の直前の行をどのように配置するかを設定します。壊す。

text-emphasis属性：向元素的文本应用重点标记以及重点标记的前景色。

text-justify属性：规定当 text-align，设置为“justify”时所使用的对齐方法。