Cssのよく使う操作を総括します

一般的なcssスタイル操作

単行テキストオーバーフローマスク

構文:white-space:nowrap|pre-wrap|pre-line|inherit

nowrap:単行テキストは改行せず、テキストは1行を表示します.

pre:空白を残す(遊覧機が表示された場合、スペースを残す);

pre-wrap:空白シーケンスを保持し、正常に改行する.

pre-line:空白のシーケンスをマージしますが、改行は保持されます.

inherit:親要素white-spaceプロパティの値を継承します.

構文:text-overflow:clip|ellipsis|string

clip:テキストを切り取る;

ellipsis:切り取られたテキストの代わりに省略記号の形式;

string:裁断された文字の代わりに制定された文字を使用する(火狐ブラウザをサポートする).

div {
    white-space: 'nowrap'; 
    overflow: hidden; 
    text-overflow: ellipsis;
}

マルチラインテキストオーバーフローマスク

構文:display:-webkit-box、オブジェクトを弾性伸縮ボックスモデルとして表示します.
構文:-webkit-line-clamp:number
-webkit-line-clamp:ブロック要素の表示テキストの行数を制限します(number)
構文:-webkit-box-orient:horizontal|vertical|inline-axis|block-axis
伸縮ボックスオブジェクトのサブエレメントの配置方法を設定または取得します.

horizontal:箱の水平配置その内容;

vertical:箱はその内容を垂直にレイアウトします.

inline-axis:箱はインライン軸に沿ってそのサブ要素を示します.

block-axis:箱はブロック軸に沿ってそのサブ要素を示す.

div {
    overflow: hidden;  
    text-overflow: ellipsis;  
    display: -webkit-box;  
    -webkit-line-clamp: 2;  
    -webkit-box-orient: vertical;
}

三角形の効果を実現(上へ)

Transparent:透明に設定されていることを示します

.triangle {  
    width: 0;  
    height: 0;  
    border-right: 20px solid transparent;  
    border-left: 20px solid transparent;  
    border-bottom: 20px solid red;  
}

css 3垂直中心を実現

構文:display:flex,justify-content:center,align-items:center

display:flex、フレキシブルレイアウト表示を設定します.

justify-content:center、サブ要素の水平中央を設定します.

align-items:center、サブ要素を垂直に中央に設定します.

div {
    display: flex;  
    justify-content: center;  
    align-items: center;
}

css 3シャドウ効果を実現

構文:box-shadow:h-shadow v-shadow blur spread color inset;

h-shadow:水平シャドウ位置(必須)、負の値を許可します.

v-shadow:垂直シャドウの位置(必須)、負の値を許可します.

blur:ファジイ距離(選択);

spread:シャドウサイズ(オプション);

color:シャドウカラー(オプション);

inset:外層のシャドウ(開始時)からシャドウの内側のシャドウ(選択)を変更し、デフォルトは外側シャドウです.

div {
  box-shadow: 2px 2px 2px 2px #f00 inset;
}

css 3はフィレット効果を実現

構文:border-radius:number px;numberは数字
border-radiusは複数の値を設定できます.1つの値:4つのフィレットが同じであることを示します.2つの値:最初の値は右上と左下のフィレットの値で、2番目の値は右下と左上のフィレットの値です.3つの値:最初の値は左上のフィレットの値で、2番目の値は右上と左下のフィレットの値で、3番目の値は右下の値です.4つの値:最初の値は左上のフィレットの値で、2番目の値は右上で、3番目の値は右下の値で、4番目の値は左下のフィレットの値です.

div {
   border-radius: 30px; 
   /*border-radius: 10px 30px*/
   /*border-radius: 10px 20px 30px*/
   /*border-radius: 10px 20px 30px 40px*/
}

css 3テキスト効果を実現

構文:text-shadow:h-shadow v-shadow blur color;

h-shadow:必須.水平シャドウの位置.負の値を許可します.

v-shadow:必須です.垂直シャドウの位置.負の値を許可します.

blur:オプション.ぼやけた距離

color:オプション.影の色;

div {
    text-shadow: 2px 2px 2px #F00;
}

css擬似クラスfirst-letter

構文:first-letterは、段落テキストの最初の文字に特殊なスタイルを追加することを示します.

div:first-letter{
    font-size: 50px;
    color:#f00;
    ........
}

css擬似クラスfirst-line

構文:first-lineは、テキストの最初の行に特殊なスタイルを追加することを示します.

div:first-line {
    font-size: 50px;
    color:#f00;
    ........
}

cssは遊覧器にまたがって透明である

互換性IE 8および以下のバージョン

div{
    width: 200px;  
    height: 200px;  
    background: #00B7FF;  
    opacity: 0.5; /*     */  
    filter: alpha(opacity=50);/*IE    8*/
}

css 3ピクチャトリミング

構文:object-fit:contain|cover|fill|none|scale-down

contain:コンテンツをスケールし、コンテンツのアスペクト比を維持する.

cover:コンテンツボックス全体を埋め、コンテンツ幅比を維持します.オブジェクトの幅比がコンテンツボックスと一致しない場合、オブジェクトはコンテンツ幅に適応するために切り取られます.

fill:コンテンツボックス全体(デフォルト)を入力し、元のスケールを維持しません.

none:画像の幅を一定に保つ;

scale-down:ピクチャの実際の幅が設定されたピクチャの幅より小さい場合、表示効果はnoneと一致する.そうでなければ、表示効果はcontainと一致します.

div img {
    width:100%;
    height:100%;
    object-fit: cover;
}

Input placeholderの色を設定する

div::-webkit-input-placeholder {color: #999} 
div:-moz-placeholder { color: #999} 
div::-moz-placeholder {color: #999} 
div:-ms-input-placeholder {  color: #999}

ブラーフィルタ効果

構文:filter:blur()|brightness()|contrast()|drop-shadow()|grayscale()|hue-rotate()|invert()|opacity()|saturate()|sepia()|url()

blur(px):ガウスブラーを設定し、px単位を使用します.

brightness(%):画像のシェーディングを設定し、%を単位として使用し、値が大きいほど明るくなります.

contrast(%):画像のコントラストを調整します.

drop-shadow(h-shadow v-shadow blur spread color):画像にシャドウ効果を設定し、box-shadowを参照します.

grayscale(%):画像を階調画像に変換し、%を単位とする.

hue-rotate(deg):画像に色相回転を適用し、degを単位とする.

invert(%):0-100%の反転入力画像を設定します.

opacity(0.5):透明度を0-1に設定します.

saturate(%):画像飽和度を設定します.

sepia(%):画像を濃い褐色に変換し、値は0-100%である.

url():URL関数は、SVGフィルタを設定するXMLファイルを受け取り、特定のフィルタ要素

を指定するアンカーポイントを含むことができる.

div{
    filter: blur(1px);
}

更新を続ける...