フレーム
ボックスは、境界半径を丸く：5pxの/ 20％。
境界半径：5pxの4PX 3px 2ピクセル、左上、右上、右下、左下
ボックスシャドウボックスシャドウ：ボックスシャドウ：X軸Y軸をオフセットシャドウぼかし半径半径シャドウ色シェーディング拡張投影（影の色のボケの程度）をオフセット
注意：挿入図は、ボックス内の影を指し、外部のデフォルト、最初または最後のパラメータの位置に書き込まれたはめ込み、他の場所が無効です
値は距離の上側から、左側3である場合、影の色の値が4、距離左側、上側距離、ぼかし画素、影の色であります
場合の値は、仮想ピクセルの上側から、左側から、影の色5であり、色が反転内部に表示されます
逆方向に負の値、
背景
背景サイズ背景サイズ自動デフォルト値は50px 200pxの幅の画像の長さを表す値の大きさを変更することなく、高さが同じ割合の長さの値に続く200 50が 充填された容器の全体の外側の層を覆います
背景タイル背景リピート
マージン位置に応じて、境界ボックス：背景測位位置1（バックグラウンド原点）テキスト位置：位置に応じてコンテンツボックスフレームパディングボックス このプロパティを使用し、無反復の背景に設定する必要があります
位置測位2（背景位置）右上左下背景位置：どのくらいの距離左右から
背景複数のカンマ区切り：背景画像：URL（画像/ bg_flower.gif）、URL（画像/ border.png）;背景リピート：なしリピート。
フォント
テキストシャドウテキスト影：三つの値：左は、上方からの距離を表す、テキストの影の色の濃淡を表示します
テキストシャドウ：四つの値：左は、上方からの距離を表し、にじみや色シェーディングの程度
テキストオーバーフロー属性のオーバーフロー：隠された;空白：NOWRAP、テキストの折り返しが最初にこれらの2つのプロパティを強制的に設定することはできません。
テキストオーバーフロークリップ：トリムテキスト。省略記号：テキスト表現するために省略クリップされたシンボルを表示 するカスタム（文字列）：記号のその定義はトリミングされているテキストの指定した文字列を表すために、
テキスト属性ワードブレークをラップ：ワードブレーク：ブレークそのすべての内容を長い英単語（祝など）がある行の終わり場合、200pxのに折り返されます、それは、行の終わりに、単語を切り捨てますconra（祝の前端部）は、
後端部の次の行動tulation（conguatulation）。
単語ブレーク：ブレークワード;違いは、それが次の行に自動的に単語全体、行の最後には全体の単語を表示するのに十分な幅ではない場合、それは、全体として、単語全体をお祝いということで、単語が切断しません。
サーバー上のフォントスタイルを紹介 する@ font-face {フォントファミリ ： フォント名; SRC：サーバー上のフォントファイルのパス}
RGBA色と透明度のopcity
R：赤、G：緑、およびB：青アルファ：透明度パラメータ
RGBは0から1の非負の値の範囲0〜255/0〜100％のアルファ範囲であります
0〜1の範囲opcity
グラデーションカラー
背景画像：リニアグラジエント（下に、赤＃1 FFF）。
パラメータの説明：最初のパラメータは右に、下へ、上へ勾配方向を指定する左......先頭に、左に、
指定された開始および終了の値はより多くの色を有することができる：第二および第三の引き数を色の背景画像（線形勾配下、＃1 FFF、黒、赤に）。
絵
（セット楕円）：50％画像は、境界半径を丸く
最大幅に応じた画像：100％;高さ：自動;
ピクチャーシャドーボックスシャドウ
写真フィルターコード下記のとおり
回転
2D変換：回転（） - ネガティブ要素が反時計回りに回転することを可能にする回転、内部回転角括弧書き、デフォルトの時計回りの回転を。
翻訳（） - ブラケットのx、yの値に、現在の位置から移動します。負の値を変換するために逆方向に移動し、許可されている：（30px、30px）翻訳：下方右側に30px、30px、元の格納場所
スケール（） -複数の高さは、ブラケットの幅の変動要因により元のサイズを変更する 変換：スケール（2,4）の幅が2倍になるが、高さが4倍
スキュー（） - 水平方向と垂直方向にねじられ、ねじれ角ブラケットが水平であり、垂直方向のねじれ角変換：スキュー（30度、は0deg）;横ねじりDIV 30度、テキストが内部捩りに追従します
変換：スキュー（値は0deg、30度）を 、 DIV長手ツイスト30度、テキストは内部ねじれが続く
変換：スキュー（30度、30度）を 、 横続くテキストの内側に捻ら、DIV長手ツイスト30度、30度ツイスト
括弧内の回転の反転ライト度に直交する水平軸Xに沿って - 図3Dは、回転X（）を変換します
回転Y（） - 水平垂直軸Yフリップブラケットに沿って回転角度を書きます
2Dと3Dとの間の差 3D変換に変換2Dとの違いは：のみ、その2次元平面に変換し、テキストを順番に見ることができません
3D変換は、（Z軸に関連する）空間が行わ反転占める前及び後に行われるミラー効果、に対応します。
コード：
<！DOCTYPE HTML>
<HTML>
<ヘッド>
<メタ文字セット= "UTF-8">
<タイトル> </ TITLE>
<スタイルタイプ= "テキスト/ cssの">
.aa {
幅：100ピクセル;
高さ：100pxに。
/ *国境：1pxの固体; * /
/ *背景色：RGBA（220,230,242,1）; / *最後のものは、透明性が/あります
/ *不透明度：1; 0 1に提供される透明* /
背景画像：リニアグラジエント（底、＃1 FFF、赤、青）; / *背景*勾配/
transform: rotate(8deg);
transform:translate(30px,30px);
transform:skew(30deg,0deg);
}
img{
border-radius: 50%;/* （设置椭圆形） */
max-width: 100%;height: auto;
box-shadow:2px 2px #0000FF;
transform: rotate(8deg);
}
img:hover{
transform: rotate(8deg) translate(30px,30px) scale(1.1,1.1);;
/* transform:scale(2,4); */
/* 模糊效果 blur*/
/* filter: blur(4px); */
/* 高亮效果 */
/* filter: brightness(0.30); */
/* 对比度 */
/* filter: contrast(180%); */
/* 灰色图像 */
/* filter:grayscale(100%); */
/* 色相旋转 */
/* filter: hue-rotate(180deg); */
/* 反转输入图像 */
/* filter: invert(100%); */
/* 透明度 */
/* filter: opacity(50%); */
/* 饱和度 */
/* filter: saturate(7); */
/* 深褐色 */
/* filter: sepia(100%); */
/* 阴影效果 */
filter: drop-shadow(8px 8px 10px green);
}
</style>
</head>
<body>
<img src="../祝庆迎zuoye10.28/img/5.jpg" >
<div class="aa">
</div>
</body>
</html>
效果
