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

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

4097 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!