Exemple de code pour réaliser un effet de relief en utilisant CSS

Cet article présente principalement comment utiliser CSS pour obtenir l'effet de relief. L'article donne des exemples de codes et des explications détaillés. Je pense qu'il a une certaine valeur de référence pour tous les amis intéressés.

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

Attaché en premier Code ci-dessus :

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

Joignez l'effet que vous avez créé :

Un effet très pratique

analyse de style flex :

display:-webkit-flex fournit un Conteneur de boîte télescopique

-webkit-align-items:

flex-start : La bordure de la position de départ de l'axe transversal (axe vertical) de l'élément de boîte flexible est proche du point de départ bordure 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 l'espace est alloué aux éléments enfants de l'objet modèle flexbox.

aucun :

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

[ flex-grow ] : Définition Le taux d'expansion de l'élément flexbox. (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

Utiliser davantage le CSS Veuillez faire attention au site Web PHP chinois pour les articles connexes sur l'exemple de code pour obtenir l'effet de relief !