Utilisez CSS pour obtenir un effet de soulagement

Cette fois, je vais vous apporter les précautions concernant l'utilisation du CSS pour obtenir l'effet relief Ce qui suit est un cas pratique, jetons un coup d'œil.

Avant-propos

J'ai récemment vu un effet en regardant Baidu Maps. J'ai senti que cet effet devrait être assez bon lorsqu'il est utilisé sur des pages Web, alors je l'ai étudié.

Le rendu est le suivant :

L'effet relief nécessite une connaissance du caisson télescopique (flex)

flex Il est entièrement pris en charge dans Chrome. Vous devez ajouter le préfixe -webkit-. Certains autres navigateurs le prennent en charge et d'autres ne le font pas. Consultez vous-même le manuel CSS. Aujourd'hui, je veux principalement parler de la façon de créer l'effet de relief

Ci-joint en premier Téléchargez le code :

<p class="title">
        <p class="word">生活服务</p>
        <p class="relief">
            <p class="border"></p>
        </p>
    </p>

body,p{
     padding: 0;
     margin: 0;
 }
.title{
    font-size: 15px;
    font-family: "Microsoft Yahei", "Trebuchet MS", Arial, Helvetica, sans-serif;
    display: -webkit-flex;
    -webkit-align-items: center;
    margin-top: 50px;
    margin-left: 20px;
    margin-right: 20px;
}
.word{
    -webkit-flex: 0 0 auto;
    padding-right: 10px;
}
.relief{
    -webkit-flex: 1;
}
.border{
    height: 0;
    width: 100%;
    border-top: 1px solid #808080;
    border-bottom: 1px solid #fff;
}

et joignez l'effet que vous avez réalisé :

Un effet très pratique

Analyse du style Flex :

display:-webkit-flex Fournit un conteneur pour la boîte flexible

-webkit-align-items :

flex-start : la bordure de la position de départ de l'axe transversal (vertical) de l'élément flexbox est proche de la bordure de départ de l'axe transversal de la ligne.

flex-end : La limite de la position de départ de l'axe transversal (axe vertical) de l'élément flex box est proche de la limite finale de l'axe transversal de la ligne.

center : L'élément flexbox est centré sur l'axe transversal (axe vertical) de la ligne. (Si la taille de la ligne est inférieure à la taille de l'élément flexbox, elle débordera de la même longueur dans les deux sens).

-webkit-flex : Attribut composite. Définit ou récupère la manière dont les éléments enfants de l'objet

modèle flexbox allouent de l'espace.

aucun :

La valeur calculée du mot-clé aucun est : 0 0 auto

[ flex-grow ] : Définit le taux d'expansion du élément de boîte flexible. (Définir les droits d'allocation d'espace)

[ flex-shrink ] : Définir le taux de retrait de l'élément flex box. (S'il déborde, l'espace supplémentaire sera digéré proportionnellement)

[ flex-basis ] : Définit la valeur de base par défaut de l'élément flex box. (Définissez la valeur de largeur de l'élément. Si non spécifié, cela dépend de la valeur de largeur de l'élément lui-même)

Enfin, définissez l'attribut border dans la bordure pour terminer la production de l'effet de relief

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 aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

CSS pour faire pivoter l'icône lors du déplacement de la souris vers le haut

Utiliser CSS3 pour implémenter un carré lumineux border

Utilisation de CSS3 pour obtenir un effet de défilement transparent en boucle infinie

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!