私のボックスでは、以下のようにドットスタイルのボーダーを使用しています。
.box {
width: 300px;
height: 200px;
border: dotted 1px #f00;
float: left;
}
ボーダーの各ドットの間のスペースを大きくしたいのですが。
border-style`に指定できる値については、MDN docsを参照してください。
- none : ボーダーがなく、幅が0になります。 これがデフォルト値です。
- hidden : 'none'と同じですが、テーブルのボーダーの競合を解決するという点では異なります。 テーブル 要素のボーダーとの競合を解決する点を除いて、 'none39; と同じです。
- dashed : 一連の短い ダッシュまたは線分。
- dotted : 連続したドット
- double : 2本の直線 ボーダー幅として定義されたピクセル量を加算した ボーダー幅として定義されます。
- groove : 彫り込み効果。
- inset : ボックスが埋め込まれているように 埋め込まれているように見せます。
- outset : の反対語。 'inset'。ボックスを立体的に見せる (エンボス加工)になります。
- ridge : 反対の 'groove'の反対。枠が3Dに見える (出てくる)ようになります。
- solid : シングル。 まっすぐな、実線。
これらの選択肢以外には、標準のボーダー'のスタイルに影響を与える方法はありません。
これらの選択肢がお気に召さない場合は、CSS3の2order-image`2を使用することもできますが、ブラウザのサポートはまだ非常に限定的であることにご注意ください。