简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Maison > interface Web > tutoriel CSS > le corps du texte

Que fait la fonction Linear-gradient() en CSS ? Implémenter une bordure circulaire avec un dégradé linéaire (code)

青灯夜游
Libérer： 2018-09-20 11:32:57
original
3938 Les gens l'ont consulté

Dans le processus de développement front-end, Linear-gradient est parfois utilisé pour obtenir divers effets. Ce chapitre vous présentera Que fait la fonction Linear-gradient() en CSS ? Implémentez une bordure circulaire à dégradé linéaire (code) . Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il vous sera utile.

1. Qu'est-ce que CSS Linear-gradient() ?

1. Définissez la fonction

css Linear-Gradient, qui est utilisée pour créer une "image" à dégradé linéaire.

2. Utilisation

Afin de créer un dégradé linéaire, vous devez définir un point de départ et une direction (spécifiée sous forme d'angle) de l'effet de dégradé. Vous devez également définir la couleur finale. La couleur d'arrêt est la transition douce que vous souhaitez que Gecko effectue, et vous devez en spécifier au moins deux, bien que vous puissiez spécifier plus de couleurs pour créer des effets de dégradé plus complexes.

Exemple (préciser 3 couleurs d'arrêt) :

background: -webkit-linear-gradient(red,yellow,blue); /* Safari 5.1 to 6.0 */
background: -o-linear-gradient(red,yellow,blue); /* Opera 11.1 to 12.0 */
background: -moz-linear-gradient(red,yellow,blue); /* Firefox 3.6 to 15 */
background: linear-gradient(red,yellow,blue); /* 标准语法 */
Copier après la connexion

Rendu :

Que fait la fonction Linear-gradient() en CSS ? Implémenter une bordure circulaire avec un dégradé linéaire (code)

L'exemple ne précise pas de direction pour obtenir un linéaire dégradé, c'est donc la valeur par défaut pour obtenir l'effet de haut en bas. Vous pouvez également spécifier une direction (angle) pour obtenir l'effet :

Spécifiez une direction (de gauche à droite) : <. 🎜>

background: -webkit-linear-gradient(right,red,yellow,blue); /* Safari 5.1 to 6.0 */
background: -o-linear-gradient(right,red,yellow,blue); /* Opera 11.1 to 12.0 */
background: -moz-linear-gradient(right,red,yellow,blue); /* Firefox 3.6 to 15 */
background: linear-gradient(to right,red,yellow,blue);/* 标准语法 */
Copier après la connexion

Que fait la fonction Linear-gradient() en CSS ? Implémenter une bordure circulaire avec un dégradé linéaire (code)

Spécifiez une direction (angle de 45 degrés) : 

background: linear-gradient(45deg,red,yellow,blue); /* 标准语法 */
Copier après la connexion

Que fait la fonction Linear-gradient() en CSS ? Implémenter une bordure circulaire avec un dégradé linéaire (code)

En même temps, le un effet de transparence dégradé peut également être obtenu (définition d'une transparence) : 


background: -webkit-linear-gradient(right,rgba(255,0,0,1),rgba(255,0,0,0)); /*Safari 5.1-6*/
background: -o-linear-gradient(right,rgba(255,0,0,1),rgba(255,0,0,0)); /*Opera 11.1-12*/
background: -moz-linear-gradient(right,rgba(255,0,0,1),rgba(255,0,0,0)); /*Fx 3.6-15*/
background: linear-gradient(to right, rgba(255,0,0,1), rgba(255,0,0,0)); /*Standard*/
Copier après la connexion

Que fait la fonction Linear-gradient() en CSS ? Implémenter une bordure circulaire avec un dégradé linéaire (code)

2. CSS définit une bordure circulaire à dégradé linéaire (code)

Principe :

Faites d'abord deux carrés de tailles différentes et empilez-les ensemble

Que fait la fonction Linear-gradient() en CSS ? Implémenter une bordure circulaire avec un dégradé linéaire (code)

Utilisez l'attribut de coin arrondi de bordure : border-radius pour définir l'arrondi angle de la bordure à 100 %

Que fait la fonction Linear-gradient() en CSS ? Implémenter une bordure circulaire avec un dégradé linéaire (code)

Utilisez Linear-gradient() pour ajouter la couleur dégradée du cercle extérieur, et cela devient :

Que fait la fonction Linear-gradient() en CSS ? Implémenter une bordure circulaire avec un dégradé linéaire (code)

Code : 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>边框渐变的圆形</title>
        <style>

            .border1{
                width: 200px;
                height: 200px;
                margin:100px auto;

                position: relative;
                border: 1px solid transparent;
                border-radius: 100%;
                background: white;
                background-clip: padding-box;
                padding: 10px;
            }
            .border1::after{
                position: absolute;
                top: -40px; 
                bottom: -40px;
                left: -40px;
                right: -40px;
                background: linear-gradient(45deg,red, blue);
                content: &#39;&#39;;
                z-index: -1;
                border-radius: 100%;
            }
        </style>
    </head>
    <body>    
        <div class="border1"></div>
    </body>
</html>
Copier après la connexion
L'exemple est très simple Vous pouvez le pratiquer ou faire des modifications sur cette base, comme : demi-cercle...

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!

Étiquettes associées：
border-radius css linear-gradient
source：php.cn
Article précédent：Une brève discussion sur 6 raisons pour lesquelles le chargement CSS échoue Article suivant：Comment transformer une page Web entière en noir et blanc ?
Déclaration de ce site Web
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
Derniers articles par auteur
Derniers numéros
Comment éliminer la barre de défilement verticale dans la page de conception ? <div><bodyclass="m-0p-0h-fitjustify-centeritems-centermin-h-screenfont-['Jos...
Depuis 2023-09-12 13:42:34
0
1
308
Le titre réécrit est : Méthode de mise en œuvre du centrage des div et du positionnement des éléments J'essaie de recréer quelque chose comme ça mais maintenant je rencontre des problèmes. Le ...
Depuis 2023-09-09 10:29:04
0
2
190
Comment puis-je empêcher les zones de saisie de ma grille de s'étirer sur l'écran ? Interface utilisateur actuelle : interface utilisateur souhaitée : comment puis-je faire e...
Depuis 2023-09-07 12:43:00
0
1
253
Comment faire 3 trous transparents en utilisant Radial-gradient à l'intérieur de -webkit-mask mais conserver l'image Je travaille sur un projet et j'ai besoin de créer un div qui doit avoir 3 trous aléatoire...
Depuis 2023-09-02 21:32:42
0
2
281
Bulle de discussion dégradée défilante Je veux un conteneur blanc de bulles de discussion avec un dégradé qui change lors du défi...
Depuis 2023-09-01 11:52:18
0
2
292
Rubriques connexes
Plus>
Recommandations populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois：Formation PHP en ligne sur le bien-être public，Aidez les apprenants PHP à grandir rapidement！