CSS3 学習ノート_html/css_WEB-ITnose

CSS3 および HTML5 とさまざまなブラウザーの互換性は依然として不均一であるため、使用する場合は、まず接頭辞 -webkit-、-moz-、-o-、-ms- を追加することを忘れないでください。

Border:
1.border-radius (実線の円の実装)
2.box-shadow: X 軸オフセット Y 軸オフセット [影のぼかし半径] [影の拡張半径] [影の色] [投影方法](効果を重ね合わせるにはカンマを使用してください)
3.border-image: url(border.png) 70 70 70 70round /repeat/stretch (外側から内側へのスライスのオフセット、それぞれ上、右、下、左)

カラー:
1.RGBA (もう 1 つの透明度)
2. カラー グラデーション: 線形/放射状グラデーション (左へ、#fff、青、赤)

テキストとフォント:
1.text-overflow: クリップ (カット) ) | ellipsis (省略記号を表示)/*オーバーフロー時に楕円を生成する効果を実現するには、強制的にテキストを 1 行で表示し (white-space:nowrap)、オーバーフローのコンテンツを非表示にする (overflow:) ことも定義する必要があります。 hidden) この方法でのみ、オーバーフローを実現できます。 face{ font-family: フォント名; src: font サーバー上のファイルのパス;}
4.text-shadow: 背景が no-repeat でない場合、この属性は次のようになります。無効*/
2.background-box | コンテンツボックス;
3.background-size: auto |コンテナ全体) | contains (片側がコンテナの端に近い)/*長さの値またはパーセンテージで表示される背景画像のサイズを設定します。また、画像を拡大縮小するために Cover と Contain を渡すこともできます。 */
4. 複数の背景画像

セレクター:
1. 新しい属性セレクター a[href^=val] (開始) | a[href*=val] (包括的)
2./:root/:not/:empty/:target (リンクのスタイルと一致するために使用)
3.first-child (最初の子要素と一致する)/last-child/nth-child( Number)/ nth-last-child/(type)first-of-type/nth-of-type(2n)/:only-child (1 つの子要素のみのスタイルを制御するため)/only-of-type
4 .:enabled /:checked/::選択セレクター (マウス選択時)/:読み取り専用/:読み取り-書き込み/::前および::後 (フロートのクリア、影の追加などに使用)

変換:
1. rotate(..deg)(回転)
2.skew(x y)(歪み)
3.scale(x,y)(スケーリング)
4.translate(x,y)(変位、上記のセンタリングで適用可能)
5.matrix() (行列、2D 変換に使用)
6.transition-duration (遷移に必要な時間)
7.transition-timing-function(linear/ease-in-out/ease-out/ease -in ) (時間の経過に伴う遷移の速度)
8.transition-lay (要素の属性値を変更してから実行を開始するまでの時間を指定するために使用されます)

Animation:
1.Keyframes (Flash のキーフレームに似ています)(形式:パーセンテージ {スタイル})
2.animation-name (キーフレームで定義されたアニメーションを呼び出します)
3.animation-duration (CSS3 アニメーションの再生時間を設定するために使用されます)
4.animation-timing-function (主に使用されるアニメーションの再生方法を設定します)
5.アニメーション遅延
6.アニメーション反復回数(無限 | )
7.アニメーション方向(通常、代替)
8.アニメーション再生状態(実行中および一時停止)
9.アニメーション- fill-mode (none、forwards、backwords、および両方) は、アニメーションの開始前と終了後に発生するアクションを定義します

Layout:
1.columns: 列幅 列数 / columns-width (auto /column- width) / column-count(auto/列数)
2.column-gap (列間隔)
3.column-rule:||< ; column-rule-color> (リストの境界線)
4.column-span (クロスカラム設定)
5. 格納可能なレイアウト