Notes 'CSS3 Practical Combat' - Conception de dégradés (1)_Échange d'expériences

Par rapport aux dégradés d'images, le plus grand avantage des dégradés basés sur CSS est qu'ils sont faciles à modifier et prennent en charge une mise à l'échelle continue, ce qui rend la transition plus naturelle. Actuellement, seuls les navigateurs basés sur les moteurs Webkit et Gecko peuvent implémenter les dégradés CSS. Le navigateur Opera basé sur le moteur Presto ne prend pas en charge les dégradés pour le moment. Bien qu'IE basé sur Trident puisse y parvenir via des filtres, cela n'est pas recommandé.

Conception de dégradé CSS pour le moteur Webkit (Safari 4 et supérieur)

Syntaxe de base :

-webkit-gradient(<type>,<point>[,<radius>]&#63;,<point>[,<radius>]&#63;[,<stop>]*)

Description du paramètre :

<type> : Définissez le type de dégradé, y compris le dégradé linéaire (linéaire) et le dégradé radial (radial).

<point> : Définissez les coordonnées du point de départ et du point final du dégradé, c'est-à-dire les coordonnées des axes x et y où le dégradé commence à être appliqué, et les coordonnées où le dégradé se termine. Ce paramètre prend en charge les valeurs numériques, les pourcentages et les mots-clés, tels que (0, 0) ou (gauche, haut), etc. Les mots clés incluent haut, bas, gauche et droite.

<radius> : Lors de la définition d'un dégradé radial, il est utilisé pour définir la longueur du dégradé radial. Ce paramètre est une valeur numérique.

<stop> : Définissez la couleur du dégradé et la taille du pas. Il comprend trois types de valeurs, à savoir la couleur de départ, définie à l'aide de la fonction from (valeur de couleur) ; la couleur de fin, définie à l'aide de la fonction to (valeur de couleur) : le pas de couleur, défini à l'aide de color-stop (valeur, valeur de couleur). ). color-stop() contient deux valeurs de paramètre. La première valeur de paramètre est une valeur numérique ou une valeur en pourcentage, la plage de valeurs est de 0 à 1,0 (ou 0 % à 100 %) et la deuxième valeur de paramètre représente n'importe quelle valeur de couleur.

Utilisation de base du dégradé linéaire :

/*简单的线性渐变背景色，从顶部到底部，从蓝色向红色渐变显示*/

background: -webkit-gradient(linear, left top, left bottom, from(blue), to(red));

Effet démo :

/*从顶部到中间，再从中间到底部，从蓝色到绿色，再到红色渐变显示*/

background: -webkit-gradient(linear, left top, left bottom, from(blue), to(red), color-stop(50%, green));

Effet démo :

/*设计二重渐变，从顶部到底部，先是从蓝色到白色渐变显示，再从黑色到红色渐变显示*/

background: -webkit-gradient(linear, left top, left bottom, from(blue), to(red),color-stop(0.5, #fff), color-stop(0.5, #000));

Effet démo :

/*通过设置不同的步长值，从而设计多重渐变效果，从顶部到底部，先是从蓝色到白色渐变，再从百色到黑色渐变，最后是从黑色到红色渐变显示*/

background: -webkit-gradient(linear, left top, left bottom, from(blue), to(red),color-stop(0.4, #fff), color-stop(0.6, #000));

Effet démo :

Résumé : La fonction color-stop() contient deux valeurs de paramètre. La première valeur de paramètre spécifie la position de la marque de coin et le deuxième paramètre spécifie la couleur de la marque de couleur. Un dégradé peut contenir plusieurs arrêts de couleur. La valeur de position est une valeur décimale comprise entre 0 et 1, ou un pourcentage compris entre 0 et 100 %, spécifiant le rapport de position des arrêts de couleur.

Utilisation de base du dégradé radial

/*同心圆（圆心坐标为200，100），内圆半径为10，外圆半径为100，内圆小于外圆半径，从内圆红色到外圆绿色径向渐变，超过外圆半径显示为绿色，内圆显示红色*/
background: -webkit-gradient(radial, 200 100, 10, 200 100, 100, from(red), to(green));

Affichage de l'effet :

/*同心圆（圆心坐标为200，100），内圆半径为100，外圆半径为100，内圆小于外圆半径，从内圆红色到外圆绿色径向渐变。当内圆和外圆半径相等时，则渐变无效*/
background: -webkit-gradient(radial, 200 100, 100, 200 100, 100, from(red), to(green));

Effet démo :

/*同心圆（圆心坐标为200，100），内圆半径为100，外圆半径为10，内圆大于外圆半径，从内圆红色到外圆绿色径向渐变，超出内圆半径显示为红色，外圆显示绿色*/
background: -webkit-gradient(radial, 200 100, 100, 200 100, 10, from(red), to(green));

Effet démo :

/*非同心圆，内圆圆心和外圆圆心的距离小于两圆半径的差，则显示上图效果，呈现锥形径向渐变效果。锥形的尖锐性与两圆圆心距离成正比*/
background: -webkit-gradient(radial, 120 100, 10, 200 100, 100, from(red), to(green));

Effet démo :

/*同心圆，在内圆到外圆中间90%的位置，即距离外环内添加一个蓝色色标，设计多层径向渐变，如下图所示。*/
background: -webkit-gradient(radial, 200 100, 10, 200 100, 100, from(red), to(green), color-stop(90%, blue));

Effet démo :

/*通过设置to()函数的颜色值为透明，可以设计发散的圆形效果*/
background: -webkit-gradient(radial, 200 100, 10, 200 100, 90, from(red), to(rgba(1,159,98,0)));

Effet démo :

/*通过设置to（）函数的颜色值为透明，同时设计相似色，可以设计球形效果*/
background: -webkit-gradient(radial, 180 80, 10, 200 100, 90, from(#00C), to(rgba(1,159,98,0)), color-stop(98%, #0CF));

Effet démo :

/*通过为背景图定义多个径向渐变，可以设计多个气泡效果，如下图所示*/
background: -webkit-gradient(radial, 45 45, 10, 52 50, 30, from(#A7D30C), to(rgba(1,159,98,0)), color-stop(90%, #019F62)), -webkit-gradient(radial, 105 105, 20, 112 120, 50, from(#ff5f98), to(rgba(255,1,136,0)), color-stop(75%, #ff0188)), -webkit-gradient(radial, 95 15, 15, 102 20, 40, from(#00c9ff), to(rgba(0,201,255,0)), color-stop(80%, #00b5e2)), -webkit-gradient(radial, 300 110, 10, 300 100, 100, from(#f4f201), to(rgba(228, 199,0,0)), color-stop(80%, #e4c700)); -webkit-background-origin: padding-box; -webkit-background-clip: content-box;

Effet démo :

Application de dégradéDéfinir la bordure de l'effet de dégradé

Code :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Webkit引擎的渐变实现方法</title>
<style type="text/css">
div {
 border-width: 20px;
 width: 400px;
 height: 200px;
 margin: 20px;
 -webkit-border-image: -webkit-gradient(linear, left top, left bottom, from(#00abeb), to(#fff), color-stop(0.5, #fff), color-stop(0.5, #66cc00)) 20;
}
</style>
</head>

<body>
<div></div>
</body>
</html>

Effet démo :

Définir l'effet de contenu de remplissage

Code :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Webkit引擎的渐变实现方法</title>
<style type="text/css">
.div1 {
 width:400px;
 height:200px;
 border:10px solid #A7D30C;
 background: -webkit-gradient(linear, left top, left bottom, from(#00abeb), to(#fff), color-stop(0.5, #fff), color-stop(0.5, #66cc00));
 float:left;
}
.div1::before {
 width:400px;
 height:200px;
 border:10px solid #019F62;
 content: -webkit-gradient(radial, 200 100, 10, 200 100, 100, from(#A7D30C), to(rgba(1, 159, 98, 0)), color-stop(90%, #019F62));
 display: block;
}
</style>
</head>

<body>
<div class="div1">透视框</div>
</body>
</html>

Effet d'affichage :

Définir l'icône de la liste

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Webkit引擎的渐变实现方法</title>
<style type="text/css">
ul {
 list-style-image: -webkit-gradient(radial, center center, 4, center center, 8, from(#ff0000), to(rgba(0, 0, 0, 0)), color-stop(90%, #dd0000))
}
</style>
</head>

<body>
<ul>
 <li>新闻列表项1</li>
 <li>新闻列表项2</li>
 <li>新闻列表项3</li>
 <li>新闻列表项4</li> 
</ul>
</body>
</html>

Effet démo :