border
プロパティーのridge
はブラウザーによってどのように違うかを軽くテストした。複数の枠線を組み合わせて作るわずかに凹んだ(凸んだ)直線の代わりに使うのは無理がありそうという結論だった。だった。だった……。
テストは以下のような簡単なCSSで行った。
.test {
border-left: 2px ridge gray;
height: 240px;
}
![Firefox 12でのborder-left: 2px ridge grayのテスト。](/img/blog/test-ridge-fx12.png)
![Chrome 19でのborder-left: 2px ridge grayのテスト。](/img/blog/test-ridge-ch19.png)
![Safari 5でのborder-left: 2px ridge grayのテスト。](/img/blog/test-ridge-sf5.png)
![Opera 11でのborder-left: 2px ridge grayのテスト。](/img/blog/test-ridge-op11.png)
![Internet Explorer 9でのborder-left: 2px ridge grayのテスト。](/img/blog/test-ridge-ie9.png)
Firefox 12が一番コントラスがきつく、Chrome 19とSafari 5、Opera 11が明るい方が指定した色になりコントラストは弱い。Internet Explorer 9はこの両者の中間。色によって違う可能性もある。
RGBAで透過させると擬似的にコントラスをが低下するのでCh19あたりからぎりぎりIE9までは違和感ない程度にコントラスを合わせられるが、Fx12はちょっと無理そう。事情により複数の枠線を組み合わせられない場合はborder
とbox-shadow
プロパティーを組み合わせて実現するというのがモダンで現実的な解っぽい。inset
なbox-shadow
を使うとOpera 11でborder
と重なって見えないバグ(?)とかにはまる(った)。