css 3常用属性整理

CSS 3には多くの属性が追加されている
1.CSS 3ボーダー

border-radius:ボックスのフィレットボーダーを作成します.border-radius:3px 4px 5px 6px;

box-shadow:ボックスに枠線シャドウを追加します.box-shadow:10px 10px 5px #888888;

border-image:画像を使用してボックスに枠線を追加します.border-image：url(border.png) 30 30 round;

2.CSS 3背景

background-size:背景画像のサイズを規定し、画素またはパーセンテージを使用することができる.background-size:50% 50%; background-size:cover;

background-origin:所定の背景画像の位置決め領域で、属性値はcontent-box、padding-boxまたはborder-boxである.background-origin:border-box;

background-clip:背景画像を外に切り取る領域を規定します.属性値はcontent-box、padding-boxまたはborder-boxである.background-origin:padding-box;

3.CSS 3テキスト効果

text-shadow:テキストオブジェクトのシャドウ色を指定します.text-shadow:5px 5px 5px #ffffff;

writing-mode:テキストオブジェクトの書き方を規定する属性値はhorizontal-tb、vertical-rl、vertical-lrである.writing-mode:vertical-lr;

word-wrap:テキストの内容が箱の境界にあふれていることを規定します.属性値にはnormal、break-wordがあります.word-wrap:break-word;*text-overflow:インラインコンテンツオーバーフローボックスコンテナが切断または追加されたかどうかを規定する(...)およびカスタム文字.属性値はclipオーバーフロー直接クリップ、ellipsisオーバーフロー部分用...置換通常はwhite-space:nowrapと組み合わせて使用されます.width:200px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;

4.CSS 3 2 D変換

transform:CSS 3変換により、要素を移動、スケーリング、回転、伸長または延伸することができます.属性値にはtranslate()、scale()、rotate()、skew()などがあります.transform:skew(-5deg);

backface-visibility:エレメントの背面がユーザーに表示されるかどうかを指定します.属性値にはvisible、hiddenがあります.backface-visibility:visible;

5.CSS 3 D移行

transition:ボックスの遷移を設定します.transition:background-color .5s ease-in;

6.CSS 3アニメーション

オブジェクトに適用されるアニメーションの特殊効果を設定します.

@-webkit-keyframes animations{ 0%{-webkit-transform:translate(0);opacity:0;} 50%{-webkit-transform:translate(30px);opacity:1;} 70%{-webkit-transform:translate(35px);opacity:1;} 100%{-webkit-transform:translate(60px);opacity:0;} }
8.CSS 3複数列レイアウト

columnsオブジェクトの列数と各列の幅を設定または取得します.複合プロパティ値には、column-width設定ボックスの各列の幅、column-count設定ボックスの列数があります.columns:200px 4;

9.CSS 3ユーザーインタフェース

resize:セットボックス

box-sizing:ボックスモデルからなる位置を設定します.属性値はcontent-box、border-box、padding-boxです.box-sizing:border-box;

10.positionがstickyを追加

箱要素は、通常の流れに従う.これはrelativeとfixedの合体のようなもので、画面内では通常のストリームでレイアウトされ、画面外にスクロールするとfixedのように表現されます.この属性の表現は現実に見られる吸着効果である.position:sticky;