Comment créer un effet de bordure de 1px sur le terminal mobile-js tutoriel-php.cn

Comment créer un effet de bordure de 1px sur le terminal mobile

php中世界最好的语言

Libérer： 2018-03-10 15:19:47

original

2161 Les gens l'ont consulté

Cette fois, je vais vous montrer comment créer un effet de bordure de 1px sur le terminal mobile. Quelles sont les précautions pour créer un effet de bordure de 1px sur le terminal mobile. Voici des cas pratiques. regarder. .

Arrière-plan

Utilisez le stylet sous vue.js pour implémenter une bordure de 1 pixel si vous utilisez l'attribut de style CSS

border-bottom

Lors de l'implémentation d'une bordure, il s'agit d'une bordure de 1 pixel (1 ligne fine) sur un navigateur PC, mais sur un appareil mobile, plus la valeur DPI est grande, plus l'écran est clair. En utilisant cette propriété, cela deviendra une ligne très épaisse sur les appareils mobiles.

Méthode d'implémentation

Méthode 1 :

Pseudo-classePositionnement + mise à l'échelle

1. Définissez d'abord une pseudo-classe sur l'élément pour dessiner une bordure, ceci. Il s'agit d'un

positionnement absolu. Une bordure de 1 pixel est dessinée à travers la pseudo-classe et positionnée sous l'élément, qui est la bordure inférieure

border-1px($color)  position: relative
  &:after
    display: block    position: absolute    left: 0
    bottom: 0
    width: 100%
    border-top: 1px solid $color    content: &#39; &#39;

Copier après la connexion

2. Implémentez une classe pour mettre à l'échelle l'élément. pseudo-classe. Mettez à l'échelle l'axe vertical proportionnellement en fonction du DPI minimum de l'appareil.

@media (-webkit-min-device-pixel-ratio: 1.5),(min-device-pixel-ratio: 1.5)
  .border-1px
    &::after
      -webkit-transform: scaleY(0.7)      transform: scaleY(0.7)
@media (-webkit-min-device-pixel-ratio: 2),(min-device-pixel-ratio: 2)
  .border-1px
    &::after
      -webkit-transform: scaleY(0.5)      transform: scaleY(0.5)

Copier après la connexion

Méthode 2 : utilisez directement

pour implémenter la frontière

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention. vers d'autres articles connexes sur le site Web PHP chinois !

Lecture connexe :

Structure de données définie et structure de données cartographiques d'ES6

Explication détaillée des nouveaux jugements sur les nombres dans ES6

Présentation et export des spécifications commonJS et es6

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!