box-shadowとカラーグラデーション
1332 ワード
box-shadowとカラーグラデーション
二重引用符による要素(インライン要素)
blockquote:before{content:open-quote}二重引用符の前半を表示blockquote:after{content:open-quote}二重引用符の後半を表示括弧に二重引用符のフォント属性を設定できます
背景画像の枠線の設定
border-image:url()30(後に単位が付いていないことに注意し、デフォルトはpx)steetch(書かなくてもよい、デフォルトはストレッチ)値は上、右、下、左の順で、例えば30 30 30 30 30 30、repeat(繰り返し)round(タイル)--両者の表示効果は同じように値を取らないと、これは枠の4つの角にしか画像が表示されません
例:
シャドウの設定
border-shadow:0 0 0 red;border-shadow:0 0 red;(4番目の値は拡大縮小、負縮小、正拡大)複数の影がある場合は、カンマで区切って値をとります
グラデーションの設定
background:-webkit-gradient(linear,0,0,0%,50%,from(color),to(color);) (1番目の値は傾斜グラデーションdeg角度単位、2番目の値は長さグラデーション、px単位)略記:background:linear-gradient(red,yellow)linearは線形変化色、redグラデーションからyellow background:linear-gradient(2 deg,red 20 px,yellow)色もrgb(2 2 2 2)またはrgba(2 2 2 2 2 30)を透明色(うち4番目の値は透明度値)linearを線形に変化させ、radialを不均一に変化させることで複数の色を増やすことができます.注意後のパーセント>前のパーセント(パーセントは色の後に書きます)
cssレイアウトの注意事項
1、まず全体的なレイアウトの考え方があって、頭が混乱しないでください2、更に小さいブロックのレイアウトを行って、計算の長さと幅(使用率100%の応用をマスターします)3、心が穏やかで、イライラしないでください
二重引用符による要素(インライン要素)
blockquote:before{content:open-quote}二重引用符の前半を表示blockquote:after{content:open-quote}二重引用符の後半を表示括弧に二重引用符のフォント属性を設定できます
背景画像の枠線の設定
border-image:url()30(後に単位が付いていないことに注意し、デフォルトはpx)steetch(書かなくてもよい、デフォルトはストレッチ)値は上、右、下、左の順で、例えば30 30 30 30 30 30、repeat(繰り返し)round(タイル)--両者の表示効果は同じように値を取らないと、これは枠の4つの角にしか画像が表示されません
例:
border
シャドウの設定
border-shadow:0 0 0 red;border-shadow:0 0 red;(4番目の値は拡大縮小、負縮小、正拡大)複数の影がある場合は、カンマで区切って値をとります
グラデーションの設定
background:-webkit-gradient(linear,0,0,0%,50%,from(color),to(color);) (1番目の値は傾斜グラデーションdeg角度単位、2番目の値は長さグラデーション、px単位)略記:background:linear-gradient(red,yellow)linearは線形変化色、redグラデーションからyellow background:linear-gradient(2 deg,red 20 px,yellow)色もrgb(2 2 2 2)またはrgba(2 2 2 2 2 30)を透明色(うち4番目の値は透明度値)linearを線形に変化させ、radialを不均一に変化させることで複数の色を増やすことができます.注意後のパーセント>前のパーセント(パーセントは色の後に書きます)
cssレイアウトの注意事項
1、まず全体的なレイアウトの考え方があって、頭が混乱しないでください2、更に小さいブロックのレイアウトを行って、計算の長さと幅(使用率100%の応用をマスターします)3、心が穏やかで、イライラしないでください