1.CSS 3ボーダー
border-radius:CSS 3フィレットボーダー.CSS 2にフィレット長方形を追加するには、フィレットごとに異なるピクチャを使用する必要があります.CSSではフィレットを作成するのは簡単で、CSS 3でborder-radiusプロパティを使用してフィレットを作成します.border: 2px solid; box-shadow:CSS 3ボーダーシャドウ.CSS 3では、box-shadowは、ボックスにシャドウを追加するために使用される.box-shadow: 10px 10px 5px #ccc; border-image:CSS 3枠線画像.CSS 3のborder-iamgeプロパティでは、画像を使用して枠線を作成できます.border-image: url(border.png) 30 30 round; 2.CSS 3背景
background-size:この属性は背景画像のサイズを規定します.CSS 3の前に、背景ピクチャのサイズは、そのピクチャの実際のサイズによって決定される.CSS 3では、背景画像のサイズを規定することができ、これにより、異なる環境で背景画像を繰り返し使用することができる.ピクセルまたはパーセントで寸法を指定できます.パーセンテージで寸法を指定すると、親要素の幅と高さに対して寸法が異なります. background-origin:この属性は背景画像の位置決め領域を規定する.背景画像はcontent-box、padding-box、border-box領域に配置できます. 3.CSS 3文字効果
text-shadow:CSS 3でtext-shadowはテキストアプリケーションにシャドウを追加することができます.text-shadow: 5px 5px 5px #ccc; word-warp:単語が長すぎると、ある領域を超えられない可能性があり、長い単語を分割して次の行に改行することができます.p { word-wrap: break-word; } 4.CSS 3 2 D変換
transform:CSS 3変換により、要素を移動、スケーリング、回転、伸長または延伸することができます.
translate():要素が現在位置から移動し、指定されたleft(X座標)とtop(Y座標)の位置パラメータに従います.transform: translate(50px, 100px);値translate(50 px,100 px)は、要素を左側から50画素移動し、先端から100画素移動する. rotate():要素が所定の角度を時計回りに回転します.負の値を使用すると、要素が反時計回りに回転します.transform: rotate(45deg);値rotate(454 deg)は要素を時計回りに45度回転させる. scale():要素のサイズは、指定された幅(X軸)および高さ(Y軸)パラメータに従って増加または減少します.transform: scale(2, 4);値scale(2,4)幅を元のサイズの2倍、高さを元の高さの4倍に変換します. skew():要素が所定の角度を回転し、所定の水平線(X軸)および垂直線(Y軸)パラメータに従います.transform: skew(30deg, 20deg);値skew(30 deg,20 deg)は、X軸の周りに要素を30度回転させ、Y軸の周りに20度回転させる. matrix():matrix()メソッドは、すべての2 D変換メソッドを結合する.matrix()メソッドには、回転、スケール、移動、傾斜要素を含む6つのパラメータが必要です.
5.CSS 3 D変換
rotateX():要素はそのX軸の周りに所定の度数で回転する.transform: rotateX(120deg); rotateY():要素はそのY軸の周りに所定の度数でメタ回転する.transform: rotateY(120deg); 6.CSS 3移行
Transitionでは、CSSのプロパティ値を一定の時間区間でスムーズに移行させ、マウスクリック、フォーカスの取得、クリック、または要素の変更にトリガし、動化効果でCSSのプロパティ値を円滑に変更できます.互換性:IE 10+、Firefox 16+、Safari 6.1+、Opera12.1+
transition-property:オブジェクト内の遷移に関与する属性を取得または設定します.transition-property: none | all | property;パラメータの説明: none:属性変更なし all:すべての属性変更(デフォルト) property:要素属性名 transition-duration:オブジェクトの遷移期間を取得または設定します.transition-duration: time;パラメータの説明:は、移行効果の完了に要する時間(秒またはミリ秒)を規定する.
のデフォルト値は0 です.
transition-timing-function:オブジェクト内の過度なアニメーションタイプを取得または設定します.transition-timing-function: linear | ease | ease-in | ease-out | ease-in-out | step-start | step-end | steps([, [start | end]]?) | cubic-bezier(, , )パラメータの説明: linear:線形遷移.ベゼル曲線(0.0,0.0,1.0,1.0)と同等の均一な運動 ease:スムーズな遷移.ベッセル曲線(0.25,0.1,0.25,0.1)に等しい
ease-in:遅いから速いまで.ベッセル曲線(0.42,0,1.0,1.0)に等しい
ease-out:速いから遅いまで.ベッセル曲線(0,0,0.58,1.0)に等しい
ease-in-out:遅いから速いから遅いまで.ベッセル曲線(0.42,0,0.58,1.0)に等しい
step-start:steps(1,start)に等しい
step-end:steps(1,end)に等しい
steps([, [start | end]]?):2つのパラメータを受け入れるステップ関数の最初のパラメータ:正の整数である必要があります.関数(関数のステップ数を指し、どのくらいのステップで完了するかを指定します)の2番目のパラメータ:値はstartまたはendであり、各ステップの値が変換される時点(オプション、デフォルト値end)を指定します.
transition-delay:オブジェクトの取得または設定が遅延しすぎた時間transition-delay: time;パラメータの説明:秒またはミリ秒数を指定する前に、切り替え効果の開始を待つ.
デフォルト0 transition概要複合属性は、オブジェクト変換を取得または設定する際の過剰です. transition: property duration timing-function delay; 7.CSS 3アニメーション
CSS 3では、アニメーション画像、Flashアニメーション、JavaScriptの代わりに多くのWebページでアニメーションを作成できます.
8.CSS 3複数列
column-count:属性は、要素が区切られるべき列数を規定します. column-gap:属性は列と列の間隔を規定します. column-rul:プロパティ設定カラム間の幅、スタイル、色ルール. 9.CSS 3ユーザインタフェース
resize:属性は、ユーザーが要素サイズを調整できるかどうかを規定します. box-sizing:プロパティを使用すると、領域に適応する具体的な内容を正確に定義できます. outline-offset:属性は輪郭をオフセットし、枠線の縁を超えた位置で輪郭を描画します.