13

1px よりも細く、IE6+ で動作し、画像ではなく視覚的に適切にレンダリングされる境界線を持つことは可能ですか?

ありがとうございました。

4

15 に答える 15

9

em1px未満になるような単位を使用して境界線の幅を定義できると思いますが、それは有効です。ただし、ウィル・マーティンが言ったように、表示目的では、ピクセル全体に切り上げまたは切り捨てます。

于 2011-04-18T22:50:39.960 に答える
2

いいえ。ピクセルはモニターの基本単位であるため、1 ピクセルより小さいサイズを表示することはできません。とにかく、私が知っているブラウザでは、サブピクセル幅を指定することはできません。1px に切り上げられるか、0px に切り下げられます。

于 2011-04-18T22:45:30.880 に答える
1

編集: 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ため、他の目的で使用している場合は、別の方法を見つける必要があります (他にもいくつかあります)。

これは特にクリーンではありませんが、一貫して機能しているようです。

非常に狡猾になりたい場合は、スタイルシートをその場で計算することにより、奇妙なピクセル比をサポートできます。

于 2020-06-04T20:37:34.537 に答える
0

0.1em は 1px よりも小さい境界線を表示します 1px で点線の境界線を試し、0.1em と比較します

于 2012-07-27T10:03:50.597 に答える
0

試す

 border-top: 1px solid #c9d6df;

より小さい

 border: 1px solid #c9d6df;
于 2021-03-24T09:04:39.893 に答える