css3 の新しい属性 (再版)

前に書かれている:

CSS5 標準はまだ完全に完成していないため、さまざまなコアのブラウザには独自の標準があり、属性を混同しないように、各ブラウザは独自の標準にプレフィックス

を追加しています。

例: -moz- 主にFirefox

-webikt-主にChrome Google、

-o- 主に Apple コンピュータのブラウザに使用されます

1. box-shadow (影効果)
使用:
box-shadow: 20px 10px 0 #000;
-moz-box-shadow: 20px 10px 0 #000;
-webkit-box-shadow: 20px 10px 0 #000;
サポート:
FF3.5、Safari 4、Chrome 3
2. border-colors (境界線に複数の色を設定)
使用:
border: 10px Solid #000;
-moz-border-下の色: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-top-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
- moz-border-left-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-right-colors: #555 #666 #777 #888 #999 #aaa #bbb # ccc;
注:
カラー値の数は固定されておらず、FF のプライベート書き込みメソッドは省略形をサポートしていません: -moz-border-colors: #333 #444 #555;
サポート:
FF3+
3. boder-image (画像境界線)
使用法:
-moz-border-image: url(exam.png) 20 20 20 20repeat;
-webkit-border-image: url(exam.png) 20 20 20 20 繰り返し;
説明:
( 1)。20 20 20 20 --->幅を変更すると、それぞれ異なる効果が得られます。 ) ボーダー画像効果 (現在は 2 つのタイプのみが実装されています):
リピート --- 背景のリピートと同様に、ボーダー画像がタイル状に表示されます。
ストレッチ --- ボーダー画像が枠全体をカバーするように引き伸ばされます。 (3). 要素の境界線の太さは、ゼロ以外の非自動値に設定する必要があります。
サポート:
FF 3.5、Safari 4、Chrome 3

使用:
text-shadow: [ ;] || [];説明:( 1) が指定されていない場合は、テキストの色が使用されます。 ;
(2) シャドウには、次のようなカンマ区切りのリストを指定できます。
text-shadow: 2px 2px 2px #ccc, 3px 3px 3px #ddd;
(3) シャドウ効果は、次の順序で要素に適用されます。シャドウ リストで指定されます。
(4) これらのシャドウ効果は互いに重なり合う可能性がありますが、テキスト自体には重なりません。
(5) シャドウはコンテナの境界の外側に実行される場合がありますが、コンテナのサイズには影響しません。
サポート:
FF 3.5、Opera 10、Safari 4、Chrome 3

使用:
text-overflow: ellipsis |
-o-text-overflow:継承 | 省略記号 | クリップ;
説明: (1) 属性 ellipsis-word もありますが、すべてのブラウザーでサポートされています: IE6+、Safari4、Chrome3、Opera10

6。行の折り返し)

使用:
ワードラップ : 通常 | ブレークワード;
サポート:
IE6+、FF 3.5、Safari 4、Chrome 3
境界半径 (丸い境界線)
使用:
-moz -border-radius: 5px;
-webkit -border-radius: 5px;
サポート:
FF 3+​​、Safari 4、Chrome 3

8. 不透明度 (不透明度)

使用:
不透明度: 0.5;
filter: alpha(opacity=50); /* IE6、7 の場合 */
-ms-filter(opacity=50); /* IE8 の場合 */
サポート: all
9.合成モード)

使用:
box-sizing: content-box | // オペラ用 -moz-box-sizing: content-box;
-webkit-box-sizing: content- box | border-box;
説明 :
1. content-box: この値を使用する場合、ボックス モデルの構成モードは、要素の幅 = content + padding + border になります。 2. border-box:
を使用する場合この値では、ボックス モデルの合成モードは、要素の幅 = コンテンツになります (パディングとボーダーが設定されていても、要素の幅は変わりません)
サポート:
FF3+、Opera 10、Safari 4、Chrome 3