„CSS3 Practical Combat'-Notizen – Verlaufsdesign (1)_Erfahrungsaustausch

Im Vergleich zu Bildverläufen besteht der größte Vorteil von CSS-basierten Verläufen darin, dass sie einfach zu ändern sind und eine stufenlose Skalierung unterstützen, wodurch der Übergang natürlicher wird. Derzeit können nur Browser, die auf Webkit- und Gecko-Engines basieren, CSS-Verläufe implementieren. Der auf der Presto-Engine basierende Opera-Browser unterstützt derzeit keine Verläufe. Obwohl der IE auf Trident basiert, wird dies nicht empfohlen.

CSS-Gradientendesign für die Webkit-Engine (Safari 4 und höher)

Grundlegende Syntax:

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

Parameterbeschreibung:

<type>: Definieren Sie den Verlaufstyp, einschließlich linearem Verlauf (linear) und radialem Verlauf (radial).

<point>: Definieren Sie die Koordinaten des Start- und Endpunkts des Farbverlaufs, d. h. die x- und y-Achsenkoordinaten, an denen der Farbverlauf angewendet werden soll, und die Koordinaten, an denen der Farbverlauf endet. Dieser Parameter unterstützt numerische Werte, Prozentsätze und Schlüsselwörter wie (0, 0) oder (links, oben) usw. Zu den Schlüsselwörtern gehören „oben“, „unten“, „links“ und „rechts“.

<radius>: Bei der Definition eines radialen Farbverlaufs wird die Länge des radialen Farbverlaufs festgelegt. Dieser Parameter ist ein numerischer Wert.

<stop>: Verlaufsfarbe und Schrittgröße definieren. Es umfasst drei Arten von Werten, nämlich die Startfarbe, definiert mit der Funktion „von“ (Farbwert); die Endfarbe, definiert mit der Funktion „bis“ (Farbwert); den Farbschritt, definiert mit der Funktion „Farbstopp“ (Wert, Farbwert). ). color-stop() enthält zwei Parameterwerte. Der erste Parameterwert ist ein numerischer Wert oder ein Prozentwert, der Wertebereich liegt zwischen 0 und 1,0 (oder 0 % und 100 %), und der zweite Parameterwert stellt einen beliebigen Farbwert dar.

Grundlegende Verwendung des linearen Farbverlaufs:

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

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

Demo-Effekt:

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

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

Demo-Effekt:

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

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

Demo-Effekt:

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

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

Demo-Effekt:

Zusammenfassung: Die Funktion color-stop() enthält zwei Parameterwerte. Der erste Parameterwert gibt die Position der Eckmarkierung an und der zweite Parameter gibt die Farbe der Farbmarkierung an. Ein Farbverlauf kann mehrere Farbstopps enthalten. Der Positionswert ist eine Dezimalzahl zwischen 0 und 1 oder ein Prozentsatz zwischen 0 und 100 %, der das Positionsverhältnis der Farbstopps angibt.

Grundlegende Verwendung des radialen Farbverlaufs

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

Effektanzeige:

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

Demo-Effekt:

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

Demo-Effekt:

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

Demo-Effekt:

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

Demo-Effekt:

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

Demo-Effekt:

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

Demo-Effekt:

/*通过为背景图定义多个径向渐变，可以设计多个气泡效果，如下图所示*/
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;

Demo-Effekt:

VerlaufsanwendungDefinieren Sie den Rand des Verlaufseffekts

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>

Demo-Effekt:

Definieren Sie den Füllinhaltseffekt

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>

Anzeigeeffekt:

Listensymbol definieren

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

Demo-Effekt: