1px よりも細く、IE6+ で動作し、画像ではなく視覚的に適切にレンダリングされる境界線を持つことは可能ですか?
ありがとうございました。
em
1px未満になるような単位を使用して境界線の幅を定義できると思いますが、それは有効です。ただし、ウィル・マーティンが言ったように、表示目的では、ピクセル全体に切り上げまたは切り捨てます。
いいえ。ピクセルはモニターの基本単位であるため、1 ピクセルより小さいサイズを表示することはできません。とにかく、私が知っているブラウザでは、サブピクセル幅を指定することはできません。1px に切り上げられるか、0px に切り下げられます。
編集: Chrome 98 (2022 年 2 月 1 日) ではborder-width
、1px 未満の値の直接サポートが追加されました。
2020 年半ばの時点で、現在のバージョンの Safari と Firefox は両方ともborder-width: .5px
.
一方、Chrome は として扱います1px
。
次のような方法で、ブラウザがそれをサポートしているかどうかを検出できます。
var el = document.createElement('div');
el.style.position = 'fixed';
el.style.borderTop = '.5px solid';
document.body.appendChild(el);
var hasSubpixelBorder = el.getBoundingRect().height < 1;
document.body.removeChild(el);
document.body
起動時に実行する場合は、作成後に呼び出されるようにしてください。
これがサポートされていない場合 (Chrome など)、クラスdocument.body
または親要素を追加して、子孫に別の境界線スタイルを持たせることができます。
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
.noSubpixelBorder .border-top {
border-top-width: 0;
background-image: linear-gradient(180deg, var(--mycolor) 0, var(--mycolor) .5px, transparent 0);
}
}
@media (-webkit-min-device-pixel-ratio: 3) and (-webkit-max-device-pixel-ratio: 3.5), (min-resolution: 3dppx) and (max-resolution: 3.5dppx) {
.noSubpixelBorder .border-top {
background-image: linear-gradient(180deg, var(--mycolor) 0, var(--mycolor) .333333px, transparent 0);
}
}
複数の線形グラデーションを使用して、複数の辺に境界線を作成できます。これが引き継がれるbackground-image
ため、他の目的で使用している場合は、別の方法を見つける必要があります (他にもいくつかあります)。
これは特にクリーンではありませんが、一貫して機能しているようです。
非常に狡猾になりたい場合は、スタイルシートをその場で計算することにより、奇妙なピクセル比をサポートできます。
0.1em は 1px よりも小さい境界線を表示します 1px で点線の境界線を試し、0.1em と比較します
試す
border-top: 1px solid #c9d6df;
より小さい
border: 1px solid #c9d6df;