Dashed Line Maker(破線メーカー)
【プレビュー】
-
サイズ
-
間隔
-
border
-
色
css
解説
cssの便利に使えるborderプロパティにも、dottedやdashedなどの点線、破線がありますが、これらは幅の指定以外は全く言うことを聞いてくれません。 また、使っているWebブラウザによっても見栄えに違いが出てしまうため、安定したデザインの為にこの Dash-Line-Makerを使ってみてはいかがでしょうか?より効率的に使いたい人向けのCSS
.dash{
--size : 8px;
--interval: 8px;
--border:2px;
--color:black;
display:block;
height: var(--border);
margin: 50px auto;
border: 0;
background-image: linear-gradient(to right, var(--color) var(--size), transparent var(--size));
background-size: calc(var(--size) + var(--interval)) var(--border);
background-repeat: repeat-x;
}
css変数を使った方式です。
以下、変数定義の説明です。
--size : 破線の実線部分のサイズ --interval : 破線の空白部分のサイズ --border : 破線の縦幅 --color : 線の色
0 件のコメント:
コメントを投稿