CSS3 の新しい属性のコメントとexamples_html/css_WEB-ITnose

ここでは CSS3 の新しいプロパティを個別に説明します:

border-radius プロパティは丸い角を作成するために使用されます

div{border:2px solid;border-radius:25px;-moz-border-radius:25px; /* Old Firefox */}

border-shadow はボックスに影を追加するために使用されます

div{width:300px;height:100px;background-color:#ff9900;-moz-box-shadow: 10px 10px 5px #888888; /* 老的 Firefox */box-shadow: 10px 10px 5px #888888;}

border-image 属性で境界線に使用する画像を指定できます

div{border-image:url(border.png) 30 30 round;-moz-border-image:url(border.png) 30 30 round; /* 老的 Firefox */-webkit-border-image:url(border.png) 30 30 round; /* Safari 和 Chrome */-o-border-image:url(border.png) 30 30 round; /* Opera */}

background-size 属性で背景画像のサイズを指定します

div{background:url(bg_flower.gif);-moz-background-size:63px 100px; /* 老版本的 Firefox */background-size:63px 100px;background-repeat:no-repeat;}

background-repeat オブジェクトの表示方法を設定または取得します背景画像がレイアウトされて塗りつぶされます。最初に、background-image 属性を指定する必要があります。
repeat-x: 背景画像が水平に並べて表示されます
repeat-y: 背景画像が垂直に並べて表示されます
repeat: 背景画像が水平および垂直に並べて表示されます
no-repeat: 背景画像が並べて表示されません
round: 背景画像コンテナ全体に収まるまで自動的に拡大縮小されます。 (CSS3)
スペース: 背景画像が同じ間隔でタイル状に並べられ、コンテナ全体または特定の方向を埋めます。 (CSS3)

background-origin 属性は、背景画像の配置領域を指定します
背景画像は、content-box、padding-box、または border-box 領域に配置できます

text-shadow は影を適用できますテキストに

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

word-wrap 属性を使用すると、単語を分割することになる場合でも、テキストを強制的に折り返すことができます

新しい @font-face ルールでは、最初に名前を定義する必要がありますフォントの名前 (myFirstFont など) を選択し、フォント ファイルをポイントします。
HTML 要素にフォントを使用するには、font-family 属性を介してフォントの名前 (myFirstFont) を参照します

<style> @font-face{font-family: myFirstFont;src: url('Sansation_Light.ttf'),url('Sansation_Light.eot'); /* IE9+ */}div{font-family:myFirstFont;}</style>

matrix() メソッドは、すべての 2D 変換メソッドを組み合わせます。
matrix() メソッドは 6 つのパラメーターを受け取り、要素の回転、拡大縮小、移動、傾斜を可能にする数学関数が含まれています。

div{transform:matrix(0.866,0.5,-0.5,0.866,0,0);-ms-transform:matrix(0.866,0.5,-0.5,0.866,0,0);	/* IE 9 */-moz-transform:matrix(0.866,0.5,-0.5,0.866,0,0);	/* Firefox */-webkit-transform:matrix(0.866,0.5,-0.5,0.866,0,0);	/* Safari and Chrome */-o-transform:matrix(0.866,0.5,-0.5,0.866,0,0);	/* Opera */}

まだ完成していないので、後日更新します。推奨リンク: http://www.w3school.com.cn/css3/index.asp