CSSで縞模様の背景をつくる方法

ストライプは、バックグラウンドでクールに見えるし、繰り返しグラデーションを使用して作成することは非常に簡単です.CSSには、ストライプを作成するために使用できるrepeating-linear-gradientとrepeating-radial-gradientのプロパティがあります.これらの2つのプロパティは、すべてのbrowsersで広くサポートされています- Firefox 10 +、Chrome 26 +、Safari 6.1 +、IE 10、11、およびOpera 11.6 +(古いブラウザのための使用プレフィックス).つまり、あなたは、ブラウザのサポートについて心配せずにグラデーションストライプで次のプロジェクトをスパイスすることができます.
構文

 background: repeating-linear-gradient(angle | to side-or-corner, color-stop1, color-stop2, ...); 

これらの例では、よりよく理解するのに役立ちます.

水平ストライプ
作業
ここでは魔法が起こらない.それは、通常の線形または半径勾配と全く同じです.ここでは、各ストライプを両端に同じ色のグラデーションバックグラウンドを有する別の容器として考える.最初の2色の停止は、最初のコンテナのグラデーションの終点として機能します.上記のコードを読む:上部から、0 pxからダークブルーで始まり、20 pxでダークブルーと終了します.その後、20 pxからライトブルーで始まり、40 pxでライトブルーで終了します.手順を繰り返します.

垂直ストライプ
ちょうど右方向に垂直方向のストライプを作成するには方向を変更します.

斜めストライプ
斜めのストライプを作成する任意の角度を使用します.

放射状ストライプ
ラジアルストライプを作成するにはrepeating-radial-gradientを使用します.
CSSがより怒っていないとき、なぜ2色で止まるか.
私はあなたがこの簡単なチュートリアルから何か新しいことを学び、これはCSSで美しいものを作成し続ける動機と思います.
ハッピーコーディング!😎