So erstellen Sie eine 0,5-Pixel-Zeile in CSS

Dieses Mal zeige ich Ihnen, wie Sie mit CSS eine 0,5-Pixel-Linie erstellen. Was sind die Vorsichtsmaßnahmen für die Erstellung einer 0,5-Pixel-Linie mit CSS?

Bei der Erstellung von Designzeichnungen stützen sich die Designer des Unternehmens auf das iPhone 6 (Breite beträgt 750 physische Pixel). Das Gerätepixelverhältnis des iPhone 6 (d. h. das Verhältnis von CSS-Pixeln zu physischen Pixeln) beträgt 2. Wenn der Designer also ein Feld mit einem Rand von 1 Pixel entwirft, beträgt es 0,5 Pixel im Verhältnis zum CSS-Code.

Für dieses Problem besteht die intuitivste Möglichkeit darin, den Rahmen mithilfe von CSS direkt auf 0,5 Pixel zu setzen. Nach dem Test kann das iPhone ihn normal anzeigen. Android Fast alle Browser erkennen 0,5 als 0, also randloser Zustand, daher funktioniert diese Methode nicht

CSS3 verfügt über ein Skalierungsattribut. Wir können dieses Attribut verwenden, um den 1px-Rand um 50 % zu reduzieren, um diese Funktion zu erreichen folgt

<p class="border3">
    <p class="content">伪类设置的边框</p>
</p>

css:

.border3{
     position: relative;          
 }
 
.border3:before{
       content: '';
       position: absolute;
       width: 200%;
       height: 200%;
       border: 1px solid red;
       -webkit-transform-origin: 0 0;
       -moz-transform-origin: 0 0;
       -ms-transform-origin: 0 0;
       -o-transform-origin: 0 0;
       transform-origin: 0 0;
       -webkit-transform: scale(0.5, 0.5);
       -ms-transform: scale(0.5, 0.5);
       -o-transform: scale(0.5, 0.5);
       transform: scale(0.5, 0.5);
       -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
       box-sizing: border-box;
}

Implementierungsideen:

1. Legen Sie die Referenzposition des Zielelements fest

2 Pseudoelement zum Zielelement davor oder danach hinzufügen und absolute Positionierung festlegen

3. Fügen Sie dem Pseudoelement einen 1-Pixel-Rahmen hinzu

4. Verwenden Sie die Boxgröße: border-box-Attribut zum Umschließen des Randes. Geben Sie die Breite und Höhe ein

7. Passen Sie die Position des Modells basierend auf dem Transformationsursprung in der oberen linken Ecke an: 0 0;

Das Implementierungsergebnis wird auf dem iPhone wie folgt angezeigt:

Ich glaube, Sie haben den Fall in diesem Artikel gelesen. Sie beherrschen die Methode. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Detaillierte Erklärung der Verwendung von Zeigerereignissen in CSS3

Detaillierte Erklärung der Verwendung von Fokus-innerhalb

Das obige ist der detaillierte Inhalt vonSo erstellen Sie eine 0,5-Pixel-Zeile in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!