線形ストライプグラデーション Repeating Linear Gradient

線形ストライプグラデーションについて

線形ストライプグラデーションはbackgroundまたはbackground-imageプロパティにrepeating-linear-gradient関数を設定します。
基本的にはlinear-gradientと同じ動作と引数ですが、repeating-linear-gradientは色の位置を自動的に繰り返し、ストライプとして描画します。

【構文】

							background:repeating-linear-gradient(方向, 開始色 開始位置, 終了色 終了位置);

方向
名称	設定値	設定値（toなし）
上→下	to bottom	top
下→上	to top	bottom
左→右	to right	left
右→左	to left	right
左上→右下	to right bottom	left top
右上→左下	to left bottom	right bottom

【サンプル】

縦方向

横方向

斜め

CSS

/* 縦方向 */
								div.sample {
									background:-webkit-repeating-linear-gradient(top, #f00 0, #00f 2px);
									background:-moz-repeating-linear-gradient(top, #f00 0, #00f 2px);
									background:-ms-repeating-linear-gradient(top, #f00 0, #00f 2px);
									background:-o-repeating-linear-gradient(top, #f00 0, #00f 2px);
									background:repeating-linear-gradient(to bottom, #f00 0, #00f 2px);
								}

/* 横方向 */
								div.sample {
									background:-webkit-repeating-linear-gradient(left, #f00 0, #00f 2px);
									background:-moz-repeating-linear-gradient(left, #f00 0, #00f 2px);
									background:-ms-repeating-linear-gradient(left, #f00 0, #00f 2px);
									background:-o-repeating-linear-gradient(left, #f00 0, #00f 2px);
									background:repeating-linear-gradient(to right, #f00 0, #00f 2px);
								}

/* 斜め方向 */
								div.sample {
									background:-webkit-repeating-linear-gradient(left top, #f00 0, #00f 3px);
									background:-moz-repeating-linear-gradient(left top, #f00 0, #00f 3px);
									background:-ms-repeating-linear-gradient(left top, #f00 0, #00f 3px);
									background:-o-repeating-linear-gradient(left top, #f00 0, #00f 3px);
									background:repeating-linear-gradient(to right bottom, #f00 0, #00f 3px);
								}

CSS3逆引きリファレンス一覧へ戻る