Maison > Article > interface Web > Comment obtenir un effet de dégradé linéaire en CSS3

Comment obtenir un effet de dégradé linéaire en CSS3

藏色散人original: 2018-11-28 11:17:026543parcourir

Comment obtenir un effet de dégradé linéaire en CSS3 : créez d'abord un exemple de fichier HTML ; puis créez un div dans le corps ; enfin, utilisez l'attribut "linear-gradient" pour obtenir l'effet de dégradé linéaire.

L'environnement d'exploitation de cet article : système Windows 7, version HTML5&&CSS3, ordinateur Dell G3.

CSS3 est une version améliorée de la technologie CSS (Cascading Style Sheets). Nous pouvons utiliser les attributs CSS3 pour obtenir des effets de page plus sympas et enrichir le contenu du site Web, comme l'effet de dégradé linéaire de couleur d'arrière-plan !

Nous allons maintenant vous présenter un effet de dégradé CSS3 courant.

Tout d'abord, tout le monde doit savoir que CSS3 définit deux types de dégradés : les dégradés linéaires et les dégradés radiaux.

Cette section se concentre d'abord sur les Dégradés linéaires.

L'exemple de code est le suivant :

<!DOCTYPE>
<html>
<meta charset="utf-8">
<head>
    <title>CSS3创建Comment obtenir un effet de dégradé linéaire en CSS3</title>
    <style type="text/css">
        .container{
            text-align:center;
            padding:20px 0;
            width:960px;
            margin: 0 auto;
        }

        .container div{
            width:200px;
            height:150px;
            display:inline-block;
            margin:2px;
            color:#ec8007;
            vertical-align: top;
            line-height: 230px;
            font-size: 20px;
        }

        .linear{
            background:linear-gradient(to bottom, #4b6c9c , #5ac4ed);
        }
    </style>
</head>
<body>
<div class="container">
    <div class="linear">Linear线性渐变</div>
</div>
</body>
</html>

L'effet est le suivant :

Comment obtenir un effet de dégradé linéaire en CSS3

Comme Comme le montre l'image ci-dessus, il s'agit d'un dégradé linéaire passant des couleurs #4b6c9c à #5ac4ed.

Ou définissez la transition de couleur de #9492ff à #ccccff, l'effet est le suivant :

Comment obtenir un effet de dégradé linéaire en CSS3

attribut de dégradé linéaire dans css3 signifie créer une image avec un dégradé linéaire.

Par défaut, les transitions de dégradé linéaire de haut en bas.

Bien entendu, la direction du dégradé peut également être vers le bas/haut/gauche/droite/en diagonale, et définir un angle.

La syntaxe est :

background: linear-gradient(direction, color-stop1, color-stop2, ...);

Le premier paramètre représente la direction du dégradé linéaire, et le deuxième paramètre représente la couleur de la transition de départ , c'est-à-dire la couleur du point de départ, le troisième paramètre représente la couleur vers laquelle effectuer la transition.

Remarque : Internet Explorer 9 et les versions antérieures ne prennent pas en charge les dégradés.

Cet article est une introduction à la méthode css3 pour obtenir un effet de dégradé linéaire Il est très simple et facile à comprendre. J'espère qu'il sera utile aux amis dans le besoin !

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!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Comment rendre une image d'arrière-plan transparente en utilisant CSSArticle suivant：Comment rendre une image d'arrière-plan transparente en utilisant CSS

Articles Liés

Voir plus