CSSコードの一般的なフロントエンド

図1に示すように、垂直中心

.vc { 
      位置：絶対。
      トップ：50％ ; 
      左：50％ ;  
     変換：変換（-50％、 - 50％） 。       
} 
.vc { 
      位置：絶対。
      トップ：50％ ; 
      左：50％ ; 
      幅：100ピクセル ; 
      高さ：100pxに。
      マージン：-50px 0 -50px。
}

図2に示すように、フルスクリーン表示

HTML、本体 { 
      位置：固定されました。
      幅：100％ ; 
      高さ：100％ ; 
} 
DIV { 
     高さ：100％ 。
}

図3に示すように、画像のグレー

IMG { 
      フィルタ：グレー。
     -webkit-フィルタ：グレースケール（1） 。
}

4、勾配背景アニメーション

.bg { 
      背景画像：リニアグラジエント（＃5187c4、＃1c2f45） 。
      背景サイズ：オート200％ 。
      背景位置：0 100％ 。
      遷移：背景ポジション0.5秒。
} 
.bg：ホバー { 
     背景位置：0。
}

偏5、額縁

img.polaroid { 
     背景：＃000。
     ボーダー：SOLIDE #FFF ; 
     ボーダー幅：計6Px計6Px 20ピクセル計6Px。
     ボックスシャドウ：1pxの1pxの5pxの＃333 ; 
      幅：200pxの。
     高さ：200pxの。
}