2012-02-05

border-style: doubleの間のスペース

border-styleプロパティーでsolid以外が使われることは滅多にないけど、doubleはそこそこ使われるんじゃないかと思う。他は大体残念な感じになることが多いが、doubleは安定しているので。そのdoubleでは2本の線が引かれその間にスペースが出来る。一体このスペースはどうなってるのかみたいなどうでも良さそうな話。

まずその大きさだが、px単位系だと3で割った余りが1の場合は間のスペースが増え、余りが2の場合は枠線の太さが増える。仕様では決められてないが、大体どの実装でも同じようだ。

間のスペースが大きい状態(3で割った余りが1の時)は不恰好になりがちなので、調整できるなら3で割り切れる数にするのが無難。

次は間のスペースの色の話。こちらも仕様では特に触れられていないが、どの実装もtransparentになっている。ただし枠線と同時にbackground-colorプロパティーで背景色も指定されていた場合、スペースの色は背景色と同じになる……というより枠線の下まで背景色で塗られるのでそれが見える。そのため背景色を塗りつつ枠線の間を透過させるというようなことはそのままではできない。

.test {
  background-image: linear-gradient(
    top,
    #396 0,
    #396 100%
  );
  background-size: 100% 100%;
  background-repeat: no-repeat;
}