Hail2u.net

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

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

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

全体の太さ枠線の太さ間のスペース
3px1px1px
4px1px2px
5px2px1px

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

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

が、背景画像の場合はbackground-originプロパティーのデフォルトがpadding-boxになっていることもあり、間のスペースから背景画像が見えることはない。つまりlinear-gradient()を使って単色の背景画像を作ってやれば、上記URLの2番目の例のように間のスペースを透過させつつ背景を単色で塗りつぶすことができる。

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

サイズと繰り返し指定も必須。このテクニックに背景色を追加すれば間のスペースの色と要素の背景色を違うものにすることができたりもする。

background-clipプロパティーがあった(他多数)のでそっち使ってください……。こうやるにはどうしたらいいだろうで考えるとどうもダメだなぁ。