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

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('smiley.gif');
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) と が指定されていない場合、テキストの色が使用されます。 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. 変換変換効果:

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

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

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

1. トランジション効果

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

CSS3 の新しい背景属性とは何ですか?

CSS3 の新しい背景属性とその使用法は何ですか?

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