css 3の随想

各ブラウザには独自のカーネルがあり、プロパティを互換化するには、それぞれの標準に接頭辞を付ける必要があります.
-moz-火狐
-webkit-Google
-ms-     IE
-o-    opera
Transformのプロパティは次のとおりです.
transform : rotate(45deg);//回転の度数
transform : translate(20px,30px);//要素移動、2つのパラメータはそれぞれX,Yの値を表します
transform : scale(1.5);//要素拡大または縮小パラメータは、それぞれ延X、Y軸拡大を表す2つあります.ホーバーとよくコーディネート
transform : skew(20deg);//斜めの変化
transform-origin:10px 10px ;//基準点には2つのパラメータがあります.
transition : all 1s ease-out 0s;
最初のパラメータはCSS属性の名前です
2番目のパラメータの遷移効果にかかる時間.デフォルトは0->一般的に設定されています
3番目のパラメータ遷移効果の時間曲線(たとえば、高速から低速にデフォルトease)
4番目のパラメータの遷移時間は、たとえば5 sを設定し、デフォルトは0です.
ps:一般的にこの2つの属性を組み合わせて使います!
今、強力なanimationについて話しています.
animation (all 5s ease 0s  infinite alternate)
@keyframes all//キーフレーム+アニメーション名
{
form {left:0px;}
to{left:400px;}
}
この6つのパラメータがそれぞれ何を表しているかについてお話しします
最初のパラメータはバインドセレクタkeyframeの名前です
2番目のパラメータは、アニメーションが完了した時間です.
3番目のパラメータは、アニメーションの速度カーブ(たとえば、先に速く、後で遅く)です.
4番目のパラメータは、アニメーションの遅延開始時間です.
5つ目は動画の再生回数(infiniteは無制限再生)
6番目のパラメータは、アニメーションが逆再生されるかどうか(alternateは逆再生)です.
text-shadow:5px 5px 3px #fff;テキストシャドウ
パラメータ1 x軸オフセット
パラメータ2 y軸オフセット
パラメータ3ブラー半径
パラメータ4色
box-shadow  :
この値には、6つのパラメータ、X軸変位、Y軸変位、ぼかし距離、シャドウのサイズ、シャドウの色、シャドウのタイプが含まれます.この6つのパラメータは、選択的に省略することができる.
ブラウザの互換性
Webkitサポート:-webkit-box-shadow
Mozillaサポート:-moz-box-shadow
IE 9サポート:box-shadow
IE 8以前:サポートされていません
実用的な例
単純な効果:
img{
      height:300px;
      -moz-box-shadow:5px 5px;
      -webkit-box-shadow:5px 5px;
      box-shadow:5px 5px;
}
虚影効果:
img{
      height:300px;
      -moz-box-shadow:2px 2px 10px #06c;
      -webkit-box-shadow:2px 2px 10px #06c;
      box-shadow:2px 2px 10px #06c;
}
グラデーションシャドウの効果:
img{
      height:300px;
      -moz-box-shadow:0 0 10px #06c;
      -webkit-box-shadow:0 0 10px #06c;
      box-shadow:0 0 10px #06c;
}
グロー効果
img{
      height:300px;
      -moz-box-shadow:0 0 10px 10px #06c;
      -webkit-box-shadow:0 0 10px 10px #06c;
      box-shadow:0 0 10px 10px #06c;
}
インシャドウエフェクト
img{
      height:300px;
      -moz-box-shadow:inset 5px 5px 10px #06c;
      -webkit-box-shadow: inset 5px 5px 10px #06c;
      box-shadow: inset 5px 5px 10px #06c;
}
カラーシャドウ
img{
      height:300px;
      -moz-box-shadow:0 0 10px red,
                                  2px 2px 10px 10px yellow,
                                  4px 4px 12px 12px green;
      -webkit-box-shadow:0 0 10px red,
                                  2px 2px 10px 10px yellow,
                                  4px 4px 12px 12px green;
      box-shadow:0 0 10px red,
                                  2px 2px 10px 10px yellow,
                                  4px 4px 12px 12px green;
}
display:box ;display:-moz-box ;display:-webkit-box ;//親要素

   -moz-box-flex:2;
    -webkit-box-flex:2;
    box-flex:2;  //