HTML5 の新しい属性

1. box-shadow (シャドウ効果)

使用:
box-shadow: 20px 10px 0 #000;
-webkit-box-shadow: 20px 10px 0 #000;
サポート:
FF3.5、Safari 4、Chrome 3
2. 境界線の色 (境界線に複数の色を設定)
境界線: 10px ソリッド
-moz-border-bottom-色: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-top-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;ボーダー左の色: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz ボーダー右の色: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
注:
カラー値の数は固定されておらず、FF のプライベートな記述方法は省略形をサポートしていません: -moz-border-colors: #333 #444 #555;
サポート:
FF3+
Three。 (画像の境界線)
使用:
-moz-border-image: url(exam.png) 20 20 20 20 繰り返し;
-webkit-border-image: url(exam.png) 20 20 20 20 繰り返し;
(1)。20 20 20 20 ---> 境界線の幅は、それぞれ上、右、下、左の境界線に対応します。
(2)。 2 つのタイプのみが実装されています):
repeat - -- 背景の繰り返しと同様に、境界線の画像が並べられます。
ストレッチ --- 境界線の幅全体をカバーするように境界線の画像が引き伸ばされます。要素の値は 0 以外の非自動値に設定する必要があります。
サポート:
FF 3.5、Safari 4、Chrome 3
Four.
] || [



];
命令:
(1) が指定されていない場合は、テキストの色が使用されます。 (2) シャドウには、次のようなカンマ区切りのリストを指定できます。 text-shadow: 2px 2px 2px #ccc, 3px 3px 3px #ddd; (3) シャドウ効果は、shadow で指定された順序で要素に適用されます。リスト; (4) これらのシャドウ効果は相互に重なり合う可能性がありますが、テキスト自体には重なりません。 (5) シャドウはコンテナの境界外に実行される場合がありますが、コンテナのサイズには影響しません。 FF 3.5、Opera 10、Safari 4、Chrome 3 テキスト オーバーフロー (テキストの切り捨て) テキスト オーバーフロー: 省略記号 | 説明: (1) 属性 ellipsis-word もありますが、すべてのブラウザがサポートしているわけではありません。
サポート:
IE6+、Safari4、Chrome3、Opera10 使用: word -wrap: ブレイクワード; サポート: IE6+、FF 3.5、Safari 4、Chrome 3
使用:
-moz-border-radius: 5px; border-radius: 5px;
サポート:
FF 3+​​、Safari 4、Chrome 3


8. 不透明度 (不透明度)
使用:
opacity: 0.5;
filter: alpha(opacity=50); , 7 */
-ms-filter(opacity=50); /* IE8 用 */
サポート:
all
9. box-sizing (コントロール ボックス モデル合成モード)
使用:
box-sizing: content-box | border-box; // オペラ用
-moz-box-sizing: content-box |
1. :
この値を使用する場合、ボックス モデルの構成モードは、要素 width = content + padding + border; です。
2. border-box:
この値を使用する場合、ボックス モデルの構成モードは、要素 width = です。コンテンツ (パディングとボーダーが設定されていても、要素
の幅は変わりません)
サポート:
FF3+、Opera 10、Safari 4、Chrome 3