ホームページ > 記事 > ウェブフロントエンド > css3 の新しい属性とは何ですか? css3でよく使われる新しい属性のまとめ

css3 の新しい属性とは何ですか? css3でよく使われる新しい属性のまとめ

不言オリジナル: 2018-08-30 15:41:1618589ブラウズ

css3 の新しい属性とは何ですか? この質問をする人は、css3 が CSS のアップグレードされたバージョンであることを知っているはずです。したがって、CSS3 は当然、いくつかの新しい属性を追加します。次に、この記事では、 でよく使用される新機能について紹介します。 css3 プロパティ 。

1. CSS3 の新しい境界線属性

1. CSS3 の新しい属性である Border-color: 境界線に複数の色を設定します

p
  {
  border-style:solid;  
  border-color:#ff0000 #0000ff;
  }

ここで余談になりますが、次の点に注意する必要があります。 -width" 属性単独で使用すると機能しません。最初に「border-style」プロパティを使用して境界線を設定してください。

2. CSS3 の新しい属性である Border-image: 画像ボーダー

CSS3 の border-image 属性は、ボーダーを作成するために画像を使用します

div
{
-webkit-border-image:url(border.png) 30 30 round; /* Safari 5 */
-o-border-image:url(border.png) 30 30 round; /* Opera */
border-image:url(border.png) 30 30 round;
}

注: Internet Explorer は、border-image 属性をサポートしません。 -image 属性境界線として使用する画像を指定します。

3. CSS3 の新しい属性である Border-radius: 丸い境界線

div
{
border:2px solid;
border-radius:25px;
}

4. CSS3 の新しい属性である box-shadow: 影の効果

CSS3 の box-shadow は、影を追加するために使用されます。ボックス

div
{
box-shadow: 10px 10px 5px #888888;
}

2. CSS3 の新しい背景属性

1. CSS3 の新しい属性、Background-size: 背景画像のサイズを指定します

CSS3 より前、背景画像のサイズは、画像の実際のサイズ。 CSS3 では背景画像のサイズを指定できるため、さまざまな環境で背景画像を再利用できます。寸法はピクセルまたはパーセンテージで指定できます。寸法がパーセンテージとして指定されている場合、寸法は親要素の幅と高さに相対的なものになります。

div
{
background:url(img_flwr.gif);
background-size:80px 60px;
background-repeat:no-repeat;
}

2. CSS3 の新しい属性、Background-origin: 背景画像の表示を開始する場所を指定します。

背景画像は content-box、padding-box、または border-box 領域に配置できます。

div
{
background-image:url(&#39;smiley.gif&#39;);
background-repeat:no-repeat;
background-position:left;
background-origin:content-box;
}

3. 背景クリップ、css3 の新しい属性: 背景画像のトリミングを開始する場所を指定します

div
{
background-color:yellow;
background-clip:content-box;
}

3. CSS3 の新しいテキスト効果

1. css3 -shadow: テキストシャドウ

h1
{
text-shadow: 5px 5px 5px #FF0000;
}

説明:

(1) 5275270f2d75787ee7654275985cc94f と a11e70f05f5245eaeee9e32e3316b8f1 が指定されていない場合、テキストの色が使用されます。 Blur radius> 指定しない場合、半径の値は 0;

(2) シャドウには、次のようなカンマ区切りのリストを指定できます。 text-shadow: 2px 2px 2px #ccc, 3px 3px 3px #ddd;

(3 ) シャドウエフェクトは、シャドウリストで指定された順序で要素に適用されます

(4) これらのシャドウエフェクトは相互に重なり合う場合がありますが、テキスト自体には重なりません

(5) シャドウは境界の外側に及ぶ場合があります。コンテナのサイズに影響しますが、コンテナのサイズには影響しません。

2. CSS3 の新しい属性である Word-wrap: 自動行折り返し

単語が長すぎる場合、長い単語を分割して次の行に折り返すことができます。

p {word-wrap:break-word;}

four 、css3 の新しいアニメーション効果

1. 変換変換効果:

css3 は、変換とも呼ばれる要素の変換効果を提供します。要素を回転、拡大縮小、移動できます。

属性値: (1)transform; (2)transform-origin:transform-origin 属性は、変換の開始点を設定できます。デフォルトでは、要素の中心が開始点として使用されます。

2. アニメーションアニメーション効果

CSS3 は、アニメーション属性を通じて実現される Flash キーフレームコントロールと同様のアニメーション効果を提供します。次に、前の遷移属性は、属性の初期状態と終了状態を指定することによってのみアニメーション効果を実現できますが、これには特定の制限があります。

アニメーションアニメーション効果の実現は主に 2 つの部分で構成されます: 1. Flash アニメーションと同様にキーフレームによるアニメーションの宣言 2. アニメーション属性のキーフレームによって宣言されたアニメーションの呼び出し。

5. CSS3 の新しいトランジション効果

1. トランジション効果

トランジション効果は通常、:hover、:focus、:active、:checked などのいくつかの単純な CSS アクションを通じてスムーズなトランジション機能をトリガーします。。 CSS3 は、このトランジション機能を実装するためのトランジション属性を提供します。

CSS3 の新しいトランジションコンテンツと新しいアニメーション効果については、

CSS3 最新バージョンのリファレンスマニュアルも参照してください。内容はとても詳しいです。

この記事はここで終わります。以上が CSS3 の新しい共通属性の概要です。

css3 の新しい属性とは何ですか? css3でよく使われる新しい属性のまとめ

関連記事