I previously wrote an article about the 1px border issue: From line-height to 0.5px. The scaling approach works, but when using rem or percentage units, the 1px border often disappears on certain devices. The border-image approach doesn’t have this disappearing issue. This article explores why the 1px border disappears and why the latter renders correctly.

A few days ago, I noticed a piece of code where the line-height (1.7rem) equaled the height (1.7rem), and the font-size was 1.1rem. On iOS devices, the text was vertically centered, but on Android devices, the top and bottom gaps differed by 1px (I couldn’t actually tell if it was exactly one pixel – I was guessing).

Implement a QQ-screenshot-like tool: click the load button to load an image, long-press on the image to bring up a cropping box, resize the cropping box from its bottom-right corner, and display a real-time preview in the preview area on the right.