どうも7noteです。破線の間隔を調節する方法

もっとも簡単な点線や破線をCSSで再現する時はこのようにかきますが、
この方法では間隔を調整することができません。

style.css

/* 点線 */
.dotted {
  border-bottom: 2px dotted #000;
}
/* 破線 */
.dashed {
  border-bottom: 2px dashed #000;
}

では間隔を調整して点線や破線を書く方法は？？？

↓↓↓↓↓↓↓↓↓↓

点線や破線の間隔を調整する方法

点線や破線の間隔を調整するには、本来の線を作るborderではなくbackgroundを使用して再現します。

style.css

/* 点線 */
.dotted {
  background-image : linear-gradient(to right, #000, #000 2px, transparent 2px, transparent 8px);  /* 幅2の線を作る */
  background-size: 8px 2px;          /* グラデーションの幅・高さを指定 */
  background-position: left bottom;  /* 背景の開始位置を指定 */
  background-repeat: repeat-x;       /* 横向きにのみ繰り返す */
}

/* 破線 */
.dashed {
  background-image : linear-gradient(to right, #000, #000 2px, transparent 2px, transparent 8px);  /* 幅2の線を作る */
  background-size: 8px 1px;          /* グラデーションの幅・高さを指定 */
  background-position: left bottom;  /* 背景の開始位置を指定 */
  background-repeat: repeat-x;       /* 横向きにのみ繰り返す */
}

background-imageの数字が横幅になり、background-sizeの2つ目の数字が高さになります。
そのため、

・点線を作る時はbackground-imageの数字とbackground-sizeの2つ目の数字を同じにします。
・破線を作る時はbackground-imageの数字の方が大きくなるように調整します

4方向全てに点線・破線を作るには4回分書く

style.css

/* 点線(4方向) */
.dotted {
  background-image :
    linear-gradient(to right, #000, #000 2px, transparent 2px, transparent 8px),  /* 上の線 */
    linear-gradient(to bottom, #000, #000 2px, transparent 2px, transparent 8px), /* 右の線 */
    linear-gradient(to left, #000, #000 2px, transparent 2px, transparent 8px),  /* 下の線 */
    linear-gradient(to top, #000, #000 2px, transparent 2px, transparent 8px);   /* 左の線 */
  background-size:
    8px 2px,  /* 上の線 */
    2px 8px, /* 右の線 */
    8px 2px,  /* 下の線 */
    2px 8px;   /* 左の線 */
  background-position:
    left top,  /* 上の線 */
    right top, /* 右の線 */
    right bottom,  /* 下の線 */
    left bottom;   /* 左の線 */
  background-repeat:
    repeat-x,  /* 上の線 */
    repeat-y, /* 右の線 */
    repeat-x,  /* 下の線 */
    repeat-y;   /* 左の線 */
}

/* 破線(4方向) */
.dashed {
  background-image :
    linear-gradient(to right, #000, #000 3px, transparent 3px, transparent 8px),  /* 上の線 */
    linear-gradient(to bottom, #000, #000 3px, transparent 3px, transparent 8px), /* 右の線 */
    linear-gradient(to left, #000, #000 3px, transparent 3px, transparent 8px),  /* 下の線 */
    linear-gradient(to top, #000, #000 3px, transparent 3px, transparent 8px);   /* 左の線 */
  background-size:
    8px 2px,  /* 上の線 */
    2px 8px, /* 右の線 */
    8px 2px,  /* 下の線 */
    2px 8px;   /* 左の線 */
  background-position:
    left top,  /* 上の線 */
    right top, /* 右の線 */
    right bottom,  /* 下の線 */
    left bottom;   /* 左の線 */
  background-repeat:
    repeat-x,  /* 上の線 */
    repeat-y, /* 右の線 */
    repeat-x,  /* 下の線 */
    repeat-y;   /* 左の線 */
}

ソースが少し長くなりますが、このような方法で4方向ともに線を書くことが可能です。
ただし、角の部分が重なって見えてしまう可能性があるのでpxで微調整するか、開始位置（background-position）を数pxずらして対策をしなければならない場合があります。
あまり万能というわけではないので使いどころには注意したほうがよさそうです。

微妙にかぶってしまう場合も・・・