スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

cssでborder: dotted の間隔を調整する方法

border-bottom: dottedの間隔を調整する方法をメモ。
border-bottom: 5px dotted black
とかだと、こんな感じになってしまう。

 

これをドットの大きさはある程度小さくして、間隔だけを調整する方法。
background-image: linear-gradient(to right, white 10%, rgba(255,255,255,0) 0%);
background-position: bottom;
background-size: 8px 1px;
background-repeat: repeat-x;
これで、うまい感じに間隔だけ開けられる。
linear-gradientの white 10%の部分と、background-size: 8px 1px; の部分を調整すると、dashedっぽいのも出来る。


 



参考サイト
How to increase space between dotted border dots
スポンサーサイト

トラックバック

コメント

コメントを残す

Secret


プロフィール

U2K

Author:U2K
いろいろプログラムに関しての覚え書きをちょくちょくと書いていきます。

オススメ










オススメ

忍者AdMax

u2k on Twitter

最近の記事


上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。