Comment créer une ligne de 0,5 pixel en CSS

Cette fois je vais vous montrer comment faire une ligne de 0,5 pixel avec CSS. Quelles sont les précautions pour faire une ligne de 0,5 pixel avec CSS Voici un cas pratique, jetons un oeil.

Lorsqu'ils réalisent des dessins de conception, les concepteurs de l'entreprise basent leurs conceptions sur l'iPhone 6 (la largeur est de 750 pixels physiques). Le rapport de pixels de l'appareil de l'iPhone 6 (c'est-à-dire le rapport entre les pixels CSS et les pixels physiques) est de 2, donc lorsque le concepteur conçoit une boîte avec une bordure de 1 px, celle-ci est de 0,5 pixel par rapport au code CSS.

Pour ce problème, le moyen le plus intuitif est de définir directement la bordure à 0,5px en utilisant CSS. Après test, l'iPhone peut l'afficher normalement Android Presque tous les navigateurs reconnaîtront 0,5 comme. 0 , c'est-à-dire un état sans bordure, donc cette méthode ne fonctionnera pas

CSS3 a un attribut de mise à l'échelle. Nous pouvons utiliser cet attribut pour réduire la bordure de 1 px de 50 % pour réaliser cette fonction. suit

<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;
}

Idées d'implémentation :

1 Définir la position de référence de l'élément cible

2. pseudo-élément à l'élément cible avant ou après, et définissez le positionnement absolu

3. Ajoutez une bordure de 1px au pseudo-élément

4. Utilisez le box-sizing : Attribut border-box pour envelopper la bordure Entrez la largeur et la hauteur

5 Réglez la largeur et la hauteur à 200 %

6 Réduisez l'ensemble du modèle de boîte à 0,5.

7. Ajustez la case La position du modèle, en fonction du coin supérieur gauche transform-origin: 0 0;

Le résultat de l'implémentation est affiché sur l'iPhone comme suit :

Je crois que vous avez lu le cas dans cet article. Vous maîtrisez la méthode. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Explication détaillée de l'utilisation des événements de pointeur en CSS3

Explication détaillée de l'utilisation de concentration intérieure

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!