点線・破線CSSジェネレーター
通常、CSSのborderプロパティで作成した破線・点線は、各点の長さや間隔まで調整することは出来ません。
このジェネレーターはbackgroundプロパティを活用して破線・点線をつくることで、各点のサイズや間隔を自由に調整することが可能です。
出力されるCSSコードをコピペで簡単に使えます。
スポンサーリンク
カスタマイズ
プレビュー
CSSコード
.box {
background-image: repeating-linear-gradient(90deg, #000000, #000000 12px, transparent 12px, transparent 16px), repeating-linear-gradient(180deg, #000000, #000000 12px, transparent 12px, transparent 16px), repeating-linear-gradient(90deg, #000000, #000000 12px, transparent 12px, transparent 16px), repeating-linear-gradient(180deg, #000000, #000000 12px, transparent 12px, transparent 16px);
background-position: left top, right top, left bottom, left top;
background-repeat: repeat-x, repeat-y, repeat-x, repeat-y;
background-size: 100% 2px, 2px 100%, 100% 2px, 2px 100%;
}使用上の注意
- モダンブラウザでの使用を想定しており、IEや古いバージョンのブラウザではサポートされていないCSSプロパティを含む場合があります。
- 当サイトのリセットCSSは「modern-normalize.css」をベースにしています。ご自身のプロジェクトで利用するリセットCSSやその他のCSSによって、プレビューの見た目と差異が生じる場合があります。
スポンサーリンク
