ritina retinaのCSS3境界画像におけるピクセル仮想エッジの問題 screen_html/css_WEB-ITnose

CSS3 でこの機能が追加されましたが、W3school には具体的で詳細な説明がありません。幸いなことに、インターネット上には原理を包括的に説明できる専門家がたくさんいます - css3: border-image border image の詳細な説明。

境界線画像の原理は、四隅は変更されず、辺は引き伸ばされるかタイル状に並べられ、border-image-slice:27 27 27 27 (内側と外側のマージンと同じように短縮できます)、そして

この方法によれば、独自のボーダーリムグ（スプライトと同様）を作成する必要があります

(21+1+21)

上記のように、 PC側でピクセル境界線が表示される問題があるが、Go to Retinaによると（Web時代のRetinaではピクセルを4つのデバイスピクセルに分割して解釈して表示するため、曖昧な仮想エッジが生成され、図に示すように、内部に仮想フレームがあります

コードは border:solid 21px 透明; border-image:url("corner.png") 21round; です

この問題を解決するには、次のことを行う必要があります。以下に示すように、元の画像に処理を行い、両側のピクセルを空白のままにします

( [1+21]+1+[21+1])

コードは border:solid 22px transparent; です。 :url("corner2.png") 22 ラウンド;