CSS3(境界、背景、フォント、色、RGBAのopcity、写真、グラデーション色の透明度)

ボーダー:

ボックスフィレット:境界半径:5pxの/ 20%。

境界半径:5pxの4PX 3px 2ピクセル、左上、右上、右下、左下。

シャドーボックス:

ボックスシャドウ:

ボックスシャドウ:Xのy軸は、軸シャドウぼかし半径(影の色のボケの程度)半径シャドウ色むら拡張投影オフセットオフセット
外部デフォルトでは、シャドウボックス手段内にはめ込み、書かれた最初から挿入図:注1または最後のパラメータの位置は、他の場所が無効です。

値は、上側から左側距離、シャドウカラー3である場合;

四つの値である場合には、左側から、仮想ピクセルの上側から、色シャドウ。

値が5である場合、左側から、仮想ピクセルの上側から、影の色、色の表示が反転して内部されているかどうか;

逆方向に負の値、。

背景:

はじめに:背景画像

背景サイズ:背景サイズ

自動:デフォルト値は、画像のサイズを変更しません。

長さ値:高次の200pxの幅は50px代表は20050です。

割合:同じ長さの値

カバー:全体外側容器を充填

タイルの背景:背景リピート

 

背景位置:

位置ロケーション1(バックグラウンド原点):

テキスト位置:コンテンツボックス、

境界線の位置によると:ボーダー、ボックス、

パディング位置:パディングボックス、

このプロパティを使用して、ノー・リピートの背景を設定する必要があります。

位置測位2(背景位置):左上、右、下、背景位置:左からの距離と右どのくらい

複数の背景:カンマ区切り:背景画像:URL(画像/ bg_flower.gif)、URL(画像/ border.png);背景リピート:なしリピート。

 

フォント:

テキストの影

テキストシャドウ:三つの値:左は、上側からの距離を表し、それは、テキストの影の色の濃淡を表示します。

テキストシャドウ:四つの値:左は、上方からにじみや色むらの程度に距離を表します。

テキストoverflowプロパティ

オーバーフロー:隠された;空白:NOWRAP;テキストは、まずこれらの2つのプロパティを強制的に設定され折り返さないように。

テキストオーバーフロー:クリップ:トリムテキスト

カスタム(文字列):トリミングするテキストの指定した文字列を表現するために、独自のシンボルを定義します。

テキスト属性をラップ:

 

ワードブレイク

単語ブレーク:ブレークのすべて:その内容は、200pxのにラップする
     長い英単語(祝など)がある行の終わり場合、
     列の先端がconra(のお祝いであるにそれは、単語を切り捨てますセクション)、
     後端部の次の行動tulation(conguatulation)。

ワードブレイク:単語を破る:違いは行の最後には十分な広単語全体を表示しないようであれば、それはそれは自動的に次の行に単語全体を書きますが、全体として全体の単語をお祝いということで、単語を遮断しません。

 

RGBAの色や透明度opcity:

R:赤、G:緑、およびB:青アルファ:透明度パラメータ

RGB値の範囲は0から1の非負に0〜255/0〜100%アルファの範囲です。

opcity:0から1の範囲です。

 

 

グラデーションの色:

背景画像:リニアグラジエント(下に、#1 FFF、赤):

パラメータの説明:最初のパラメータは右に、下へ、上へ勾配方向を指定する左......先頭に、左に、
指定された開始および終了の値はより多くの色を有することができる:第二および第三の引き数を色背景画像:リニアグラジエント(下に、#1 FFF、黒、赤)。

 

画像:

画像フィレット:境界半径:50%;(楕円設定)

絵に応答:最大幅:100%;高さ:自動;

絵影:ボックスシャドウ。

 

イメージフィルタ:フィルタ

 

 

画像フィルタ:ぼかし
.blur {
    -webkit-フィルタ:ぼかし(4PX);
    フィルター:ぼかし(4PX);
}
ハイライト効果
.brightness {
    -webkit-フィルタ:明るさ(0.30);
    フィルター:明るさ(0.30)。
}
コントラスト
.contrast {
    -webkit-フィルタ:対照(180%);
    フィルター:対照(180%);
}
グレー画像
.grayscale {
    -webkit-フィルタ:グレースケール(100%);
    フィルター:グレースケール(100%);
}
色相回転
.huerotate {
    -webkit-フィルタ:色相回転(原稿180°);
    フィルター:色相回転(原稿180°);
}
入力画像反転
.invert {
    :; -webkit-フィルタ(100%)を変換するための料金履歴を
    変換するためのレート履歴(100:フィルタ%)。
}
透明
.opacity {
    -webkit-フィルタ:不透明度(50%);
    フィルター:不透明度(50%);
}
飽和
.saturate {
    -webkit-フィルタ:飽和の;(7)
    フィルタ:飽和の;(7)
}
暗褐色
{.sepia
    -webkit-フィルタ:SEPIA(100%);
    フィルター:SEPIA(100%);
}

.shadow {
    -webkit-フィルタ:ドロップシャドウ(8px 8px 10pxのグリーン);
    フィルター:ドロップシャドウ(8px緑色10pxのを8px);
}

 

おすすめ

転載: www.cnblogs.com/www1842564021/p/11769612.html