CSSで表現可能なグラデーションはとても便利で素敵ですが、どのようなグラデーション表現をしたいかによって書き方が異なり、少しややこしいです。
いつまでたっても綴りとプロパティ指定方法が覚えられないので、コピペ用にメモしておきます。
目次
線形グラデーション
シンプルに使う場合の基本形（linear-gradient(角度, 開始色, 終了色)）
.elem{
background: linear-gradient(0deg, #fff, #000);
}ベンダーあり
.elem{
background:-webkit-gradient(linear, left bottom, left top, from(#fff), to(#000));
background:-webkit-linear-gradient(bottom, #fff, #000);
background:linear-gradient(0deg, #fff, #000)
}線形グラーデーション！
円形グラデーション
シンプルに使う場合の基本形（radial-gradient(形状, 開始色, 終了色)）
.elem{
background: radial-gradient(ellipse, #fff, #000);
}ベンダーあり
.elem{
background:-webkit-radial-gradient(ellipse, #fff, #000);
background:radial-gradient(ellipse, #fff, #000);
}円形グラーデーション！
繰り返しグラデーション
基本形（repeating-linear-gradient(角度, 色1 位置, 色2 位置, ...{色n 位置})）
.elem5{
background: -webkit-repeating-linear-gradient(bottom, #fff 0px, #000 20px);
background: repeating-linear-gradient(0deg, #fff 0px, #000 20px);
}繰り返しグラデーション！
ストライプ表現
.elem{
background: -webkit-repeating-linear-gradient(left, #fff, #fff 6px, #aaa 6px, #aaa 12px);
background: repeating-linear-gradient(90deg, #fff, #fff 6px, #aaa 6px, #aaa 12px)
}ノート線のようなボーダー線
.elem{
background: -webkit-repeating-linear-gradient(bottom, #aaa, #aaa 6px, #fff 6px, #fff 12px);
background: repeating-linear-gradient(0deg, #aaa, #aaa 6px, #fff 6px, #fff 12px);
}ストライプ！
ボーダー！
コメント