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

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

青灯夜游original: 2018-09-20 11:32:574011parcourir

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); /* 标准语法 */

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);/* 标准语法 */

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); /* 标准语法 */

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*/

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>

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!

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：Une brève discussion sur 6 raisons pour lesquelles le chargement CSS échoueArticle suivant：Une brève discussion sur 6 raisons pour lesquelles le chargement CSS échoue

Articles Liés

Voir plus