Comment utiliser le dégradé linéaire à dégradé linéaire en CSS3

Cette fois, je vais vous expliquer comment utiliser le dégradé linéaire de CSS3. Quelles sont les précautions à prendre pour utiliser le dégradé linéaire de CSS3 Quelles sont les précautions . un cas pratique, jetons un coup d'oeil.

Dans les projets de centres commerciaux, le panier est une fonction très importante. La plus courante est l'opération "+-" sur l'inventaire dans le panier, y compris l'achat instantané, qui repose sur de nombreux algorithmes. Mais en tant que frontal, le +- dans le règlement du panier n'est qu'un calcul. La méthode d'implémentation traditionnelle consiste à implémenter le bouton +- via des images, mais cet article utilisera le dégradé linéaire de CSS3 pour implémenter les opérations d'addition et de soustraction du panier.

Il est très simple d'obtenir un effet de signe moins. Par exemple, si vous souhaitez implémenter un graphique de signe moins de 10px*2px, alors CSS :

.minus {
    background-image: linear-gradient(to top, #666, #666);
    background-size: 10px 2px;
}

Le principe est le suivant. . Utilisez d'abord un dégradé pour générer un signe moins de 10 px * 2 px qui couvre la totalité de l'image dégradée de couleur unie (# 666) de l'arrière-plan de l'élément, puis utilisez l'attribut background-size pour le contrôler à la taille souhaitée, et. l'effet est obtenu.

L'effet du signe plus est similaire, sauf qu'il nécessite une couche supplémentaire d'accumulation de gradient linéaire.

Enfin, vous pouvez obtenir un effet similaire à celui ci-dessous :

et les pseudo-éléments traditionnels ::before, ::afetr avec background-color Par rapport à l'arrière-plan ou à la bordure, l'utilisation de la génération d'arrière-plan dégradé présente un avantage très important, c'est-à-dire que le positionnement au centre est très pratique. Ajoutez simplement un centre directement après l'attribut d'arrière-plan, alors que la mise en œuvre traditionnelle nécessite généralement . positionnement absolu, et puis C'est très verbeux de mettre le code au milieu.

Ce qui suit est le code complet de cet exemple. Le code CSS est le suivant :

.btn {
    display: inline-block;
    background: #f0f0f0 no-repeat center;
    border: 1px solid #d0d0d0;
    width: 24px; height: 24px;   
    border-radius: 2px;
    box-shadow: 0 1px rgba(100,100,100,.1);
    color: #666;
    transition: color .2s, background-color .2s;
}
.btn:active {
    box-shadow: inset 0 1px rgba(100,100,100,.1);
}
.btn:hover {
    background-color: #e9e9e9;
    color: #333;
}
.btn-plus {
    background-image: linear-gradient(to top, currentColor, currentColor), linear-gradient(to top, currentColor, currentColor);
    background-size: 10px 2px, 2px 10px;
}
.btn-minus {
    background-image: linear-gradient(to top, currentColor, currentColor);
    background-size: 10px 2px;
}

Le code html clé est le suivant :

<a href="javascript:" class="btn btn-plus" role="button" title="增加"></a>
<input value="1" size="1">
<a href="javascript:" class="btn btn-minus" role="button" title="减少"></a>

Le L'effet de course final est le même que ci-dessus. Les textures sont les mêmes.

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 :

Comment utiliser le sélecteur de survol

Explication détaillée de l'attribut mask-image de CSS

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!