/* Dieser Code implementiert den Verlaufseffekt, wenn die Maus über den Link gleitet*/
A {
Farbe: #007c21;
Übergang: Farbe .4s Leichtigkeit;
}
a:hover { color: #00bf32 }Mit CSS3 können Sie für die meisten Elemente, einschließlich Formularelementen, Bildern und sogar Absatztext, abgerundete Ecken erstellen, ohne zusätzliche Markierungen oder Bilder einzuführen.
<!DOCTYPE html> <html lang="de"> <Kopf> <meta charset="utf-8" /> <title>Abgerundete Ecken</title> <link rel="stylesheet" href="css/rounded-corners.css" /> </head> <Körper> <div class="all-corners"></div> <div class="one-corner"></div> <div class="elliptical-corners"></div> <div class="circle"></div> </body> </html>
Vier Beispiele mit abgerundeten CSS-Ecken, einschließlich notwendiger Herstellerpräfixe zur Unterstützung älterer Versionen von Android, Mobile Safari und Safari-Browsern. Für .circle hat die Verwendung von 75px den gleichen Effekt wie 50% da das Element 150像素*150像素ist.
div {
Hintergrund: #999;
schweben: links;
Höhe: 150px;
Rand: 10px;
Breite: 150px;
}
.all-corners {
-webkit-border-radius: 20px;
Randradius: 20px;
}
.one-corner {
-webkit-border-top-left-radius: 75px;
Rand-oben-links-Radius: 75px;
}
.elliptical-corners {
-Webkit-Grenzradius: 50px / 20px;
Randradius: 50px / 20px;
}
.Kreis {
-webkit-border-radius: 50 %;
Randradius: 50 %;
} div {
Hintergrund: #ff9;
Rand: 5 Pixel durchgehend #326795;
schweben: links;
Höhe: 150px;
Rand: 10px;
Breite: 150px;
}
.example-1 {
/* Macht den Radius der oberen linken und unteren rechten Ecke auf 10 Pixel und
die obere rechte und untere linke Ecke 20px */
Randradius: 10px 20px;
}
.example-2 {
/* Macht den Radius der oberen linken Ecke auf 20 Pixel und alle anderen Ecken auf 0 */
Randradius: 20px 0 0;
}
.example-3 {
/* Macht den Radius der oberen linken Ecke auf 10 Pixel, der oberen rechten Ecke auf 20 Pixel.
die untere rechte Ecke 0 und die untere linke Ecke 30px */
Randradius: 10px 20px 0 30px;
}-webkit-border-radius: r ein, wobei r der Radius der Verrundung ist, ausgedrückt als Länge (mit Einheiten). Geben Sie border-radius: r ein, wobei r der Radius der Verrundung ist. Verwenden Sie denselben Wert wie in Schritt 1. Dies ist die Standard-Kurzformsyntax für diese Eigenschaft.-webkit-border-top-left-radius: r ein, wobei r der Radius der oberen linken Ecke ist, ausgedrückt als Länge (mit Einheiten). Geben Sie border-top-left-radius: r ein und verwenden Sie für r denselben Wert wie im ersten Schritt. Dies ist die standardmäßige Langformsyntax für diese Eigenschaft. Um eine obere rechte Ecke zu erstellen, verwenden Sie top-right ; um eine untere rechte Ecke zu erstellen, verwenden Sie bottom-right um eine untere bottom-left Ecke zu erstellen.-webkit-border-radius: x/y ein, wobei x der Radius der Verrundung in horizontaler Richtung und y der Radius der Verrundung in vertikaler Richtung ist, beide ausgedrückt als Länge (mit Einheit). . Geben Sie border-radius: x/y ein, wobei x und y den Werten im ersten Schritt entsprechen.-webkit-border-radius: r ein, wobei r der Radius des Elements (mit Längeneinheit) ist. Um einen Kreis zu erstellen, verwenden Sie die Kurzform der Syntax, wobei der Wert von r gleich der halben Höhe oder Breite des Elements sein sollte. Geben Sie border-radius: r ein, wobei r der Radius des Elements (mit Längeneinheit) ist, der im ersten Schritt gleich r ist. Dies ist die Standard-Syntax ohne Präfix. Hinweis: Ältere Browser, die border-radius nicht unterstützen, rendern nur Elemente mit quadratischen Ecken. border-radius wirkt sich nur auf die Ecken des Elements aus, auf das der Stil angewendet wird, nicht auf die Ecken seiner untergeordneten Elemente. Wenn ein untergeordnetes Element einen Hintergrund hat, kann der Hintergrund daher an den Ecken eines oder mehrerer übergeordneter Elemente erscheinen, was sich auf den Stil der abgerundeten Ecken auswirkt. Manchmal wird der Hintergrund eines Elements (hier nicht der Hintergrund seiner untergeordneten Elemente) durch seine abgerundeten Ecken sichtbar. Um dies zu vermeiden, können Sie nach der border-radius -Deklaration des Elements eine Stilregel hinzufügen: background-clip: padding-box;
Verwenden Sie text-shadow um dem Text in Absätzen, Titeln und anderen Elementen dynamische Schatteneffekte hinzuzufügen, ohne Bilder zur Textdarstellung zu verwenden.
text-shadow: . Geben Sie die Werte ein x-offset (horizontaler Offset), y-offset (vertikaler Offset), blur-radius (Unschärferadius) bzw. color darstellen (die ersten drei Werte haben Längeneinheiten und es gibt kein Komma). zwischen den vier Werten getrennt), zum Beispiel -2px 3px 7px #999 .text-shadow: . Geben Sie die Werte für x-offset (horizontaler Offset), y-offset (vertikaler Offset), blur-radius (Unschärferadius) und color ein (die ersten drei Werte haben Längeneinheiten und es gibt kein Komma). Trennung zwischen den vier Werten. Der Wert von blur-radius ist optional. Geben Sie (Komma) ein. Wiederholen Sie Schritt zwei mit unterschiedlichen Werten für die vier Eigenschaften.<!DOCTYPE html> <html lang="de"> <Kopf> <meta charset="utf-8" /> <title>Textschatten</title> <link rel="stylesheet" href="css/text-shadow.css" /> </head> <Körper> <p class="basic">Grundlegender Schatten</p> <p class="basic-negative">Grundlegender Schatten</p> <p class="blur">Unschärferadius</p> <p class="blur-inversed">Unschärferadius</p> <p class="multiple">Mehrere Textschatten</p> </body> </html>
Körper {
Hintergrund: #fff;
Farbe: #222;
Schriftart: 100 %/1,05 Helvetica, serifenlos;
Polsterung oben: 20px;
}
P {
Farbe: #222; /* fast schwarz */
Schriftgröße: 4,5em;
Schriftstärke: fett;
Rand: 0 0 45px;
}
p:last-child {
Rand: 0;
}
.basic {
Textschatten: 3px 3px #aaa;
}
/* verwendet negative Offsets – Sie können auch positive und negative Offsets mischen */
.basic-negative {
text-shadow: -4px -2px #ccc; /* etwas helleres Grau als #aaa */
}
.blur {
Textschatten: 2px 2px 10px grau;
}
.blur-inversed {
Farbe: weiß;
Textschatten: 2px 2px 10px #000; /* schwarz */
}
/* Dieses Beispiel hat zwei Schatten, die Sie aber einschließen können
mehr durch Trennen durch Komma */
.multiple {
Textschatten:
2px 2px weiß,
6px 6px rgba(50,50,50,.25);
} Diese Klassen demonstrieren mehrere text-shadow . Beim ersten, zweiten und fünften Wert wird der Wert für den Unschärferadius weggelassen. Die Klasse .multiple teilt uns mit, dass einem einzelnen Element mehrere Schattenstile hinzugefügt werden können, wobei die einzelnen Attributsätze durch Kommas getrennt werden. Auf diese Weise können Sie durch die Kombination mehrerer Schattenstile besondere und interessante Effekte erzielen.
Geben Sie also text-shadow: none; Dieses Attribut muss nicht eingegeben werden und verwendet das Herstellerpräfix.
Die Eigenschaft text-shadow akzeptiert vier Werte: x-offset mit Längeneinheiten, y-offset mit Längeneinheiten, optionaler blur-radius mit Längeneinheiten und color . Wenn blur-radius nicht angegeben ist, wird als Wert 0 angenommen. x-offset und y-offset -Werte können positive oder negative ganze Zahlen sein, was bedeutet, dass 1px und -1px beide gültig sind. Der Wert blur-radius muss eine positive ganze Zahl sein. Alle drei Werte können 0 sein. Obwohl die Syntax von text-shadow der der Eigenschaften „border“ und „background“ ähnelt, können nicht vier separate Eigenschaftswerte wie „border“ und „background“ angegeben werden. Wenn text-shadow nicht angegeben ist, wird der Anfangswert none verwendet.
Verwenden Sie die Eigenschaft text-shadow um dem Text eines Elements einen Schatten hinzuzufügen, und verwenden Sie die Eigenschaft box-shadow um dem Element selbst einen Schatten hinzuzufügen. Ihr grundlegender Eigenschaftssatz ist derselbe, aber box-shadow ermöglicht auch die Verwendung von zwei optionalen Eigenschaften: der Schlüsselworteigenschaft inset und spread (die zum Erweitern oder Verkleinern des Schattens verwendet wird).
box-shadow -Attribut akzeptiert sechs Werte: x-offset und y-offset mit Längeneinheiten, optionaler blur-radius mit Längeneinheiten, optionales inset , optionaler spread Wert mit Längeneinheiten und color . Wenn die Werte für blur-radius und spread nicht angegeben sind, werden sie auf 0 gesetzt.
<!DOCTYPE html> <html lang="de"> <Kopf> <meta charset="utf-8" /> <title>Box Shadow</title> <link rel="stylesheet" href="css/box-shadow.css" /> </head> <Körper> <div class="shadow"> <p>Schatten mit Unschärfe</p> </div> <div class="shadow-negative"> <p>Schatten mit negativen Offsets und Unschärfe</p> </div> <div class="shadow-spread"> <p>Schatten mit Unschärfe und Ausbreitung</p> </div> <div class="shadow-offsets-0"> <p>Schatten mit Offsets Null, Unschärfe und Ausbreitung</p> </div> <div class="inset-shadow"> <p>Eingefügter Schatten</p> </div> <div class="multiple"> <p>Mehrere Schatten</p> </div> <div class="shadow-negative-spread"> <p>Schatten mit Unschärfe und negativer Streuung</p> </div> </body> </html>
Körper {
Hintergrund: #000;
Farbe: #fff;
}
h1 {
Schriftfamilie: serifenlos;
Schriftgröße: 2,25em;
Zeilenhöhe: 1,1;
Textausrichtung: Mitte;
}
/* HINWEIS: Die URLs der Hintergrundbilder unterscheiden sich unten von dem im Buch gezeigten Beispiel, da ich die Bilder in einem Unterordner (genannt „img“) abgelegt habe, wie es beim Organisieren einer Site üblich ist. Ich dachte, es wäre hilfreich für Sie, zu sehen, wie Sie Ihre Hintergrundbild-URLs unter diesen Umständen erstellen. Beachten Sie, dass sich die URLs auf den Speicherort des Stylesheets beziehen, NICHT auf die HTML-Seite, auf der das Bild angezeigt wird.
.Nachthimmel {
Hintergrundfarbe: Marine; /* Ersatzfarbe */
Hintergrundbild:
URL(../img/ufo.png),
URL(../img/stars.png),
URL(../img/stars.png),
URL(../img/sky.png);
Hintergrundposition:
50 % 102 %,
100 % -150 Pixel,
0 -150px,
50 % 100 %;
Hintergrundwiederholung:
keine Wiederholung,
keine Wiederholung,
keine Wiederholung,
wiederholen-x;
Höhe: 300px;
Rand: 25px auto 0; /* etwas anders als Buch */
Polsterung oben: 36px;
Breite: 75 %;
} Das obige Programm wird verwendet, um den Effekt der Verwendung von box-shadow zum Hinzufügen eines oder mehrerer Schatten zu demonstrieren. Die ersten fünf Klassen wenden jeweils einen anderen Schattierungsstil an. Die letzte Klasse wendet zwei Schatten an (mehr können angewendet werden). Browser, die box-shadow nicht verstehen, ignorieren diese CSS-Stilregeln einfach und rendern die Seite ohne Schatten.
-webkit-box-shadow: ein. Geben Sie die Werte ein, x-offset , y-offset , blur-radius , spread bzw. color darstellen (die ersten vier Werte haben Längeneinheiten), zum Beispiel 2px 2px 5px #333 . Geben Sie box-shadow: ein und wiederholen Sie Schritt zwei.-webkit-box-shadow: ein. Geben Sie die Werte ein, x-offset , y-offset , blur-radius , spread und color darstellen (die ersten vier Werte haben alle Längeneinheiten), zum Beispiel 2px 2px 5px #333 . Geben Sie nach dem Doppelpunkt den inset und dann ein Leerzeichen ein (Sie können vor dem zweiten Schritt auch inset und ein Leerzeichen eingeben). Geben Sie box-shadow: ein und wiederholen Sie die Schritte zwei und drei.-webkit-box-shadow: ein. Geben Sie die Werte ein, x-offset , y-offset , blur-radius , spread und color darstellen (die ersten vier Werte haben alle Längeneinheiten), zum Beispiel 2px 2px 5px #333 . Fügen Sie bei Bedarf das Schlüsselwort inset ein. Geben Sie ein Komma ein. Wiederholen Sie Schritt zwei mit unterschiedlichen Werten für jedes Attribut. Geben Sie box-shadow: ein und wiederholen Sie die Schritte zwei bis vier.-webkit-box-shadow: none; . Geben Sie box-shadow: none; . Hinweis: x-offset , y-offset und spread -Werte können positive oder negative ganze Zahlen sein. Der Wert blur-radius muss eine positive ganze Zahl sein. Alle drei Werte können Null sein. Mit dem Schlüsselwort inset kann der Schatten innerhalb des Elements platziert werden.
Auf fast jedes Element können mehrere Hintergründe angewendet werden.
<!DOCTYPE html> <html lang="de"> <Kopf> <meta charset="utf-8" /> <title>Mehrere Hintergründe</title> <link rel="stylesheet" href="css/multiple-backgrounds.css" /> </head> <Körper> <div class="night-sky"> <h1>Am Nachthimmel...</h1> </div> </body> </html>
...
.Nachthimmel {
Hintergrundfarbe: Marine; /* Ersatzfarbe */
Hintergrundbild:
URL(../img/ufo.png),
URL(../img/stars.png),
URL(../img/stars.png),
URL(../img/sky.png);
Hintergrundposition:
50 % 102 %,
100 % -150 Pixel,
0 -150px,
50 % 100 %;
Hintergrundwiederholung:
keine Wiederholung,
keine Wiederholung,
keine Wiederholung,
wiederholen-x;
Höhe: 300px;
margin: 25px auto 0; /* etwas anders als Buch */
Polsterung oben: 36px;
Breite: 75 %;
}Wenden Sie mehrere Hintergrundbilder auf ein einzelnes Element an (keine Notwendigkeit, Herstellerpräfixe zu verwenden)
Geben Siebackground-color: b ein, wobei „b“ die alternative Hintergrundfarbe ist, die Sie auf das Element anwenden möchten. Geben Sie background-image: u ein, wobei u eine Liste von url ist, auf die durch absolute oder relative Pfade verwiesen wird (durch Kommas getrennt). Bei Browsern, die mehrere Hintergründe unterstützen, sind die Bilder übereinander angeordnet und überlappen sich. Das erste in der Liste wird durch getrennt Kommas. Bild oben. ) Geben Sie background-position: p ein, wobei p ein Paar aus x-offset und y-offset ist (kann positiv oder negativ sein; mit Längeneinheit oder Schlüsselwort, z. B. center top “) Kommas. Für jede im zweiten Schritt angegebene url sollte ein Satz von x-offset und y-offset vorhanden sein. Geben Sie background-repeat: r ein, wobei r repeat-x , repeat-y oder no-repeat ist, getrennt durch Kommas, einen Wert für jede im zweiten Schritt angegebene url .Für mehrere Hintergrundbilder kann die Standard-Kurzformsyntax verwendet werden, bei der die einzelnen Hintergrundparametersätze durch Kommas getrennt werden. Der Vorteil dieser Darstellung besteht darin, dass Entwickler entweder eine alternative Hintergrundfarbe oder ein Bild für ältere Browser angeben können.
.Nachthimmel {
/* Fallback mit einer Farbe und einem Bild */
Hintergrund: marineblaue URL(../img/ufo.png) keine Wiederholung in der Mitte unten;
/* zur Unterstützung von Browsern */
Hintergrund:
URL(../img/ufo.png) keine Wiederholung 50 % 102 %,
URL(../img/stars.png) keine Wiederholung 100 % -150 Pixel,
URL(../img/stars.png) no-repeat 0 -150px,
url(../img/sky.png) wiederholen-x 50 % 100 %;
Höhe: 300px;
Rand: 25px auto 0;
Polsterung oben: 36px;
Breite: 75 %;
}<!DOCTYPE html> <html lang="de"> <Kopf> <meta charset="utf-8" /> <title>Verlaufshintergründe</title> <link rel="stylesheet" href="css/gradients.css" /> </head> <Körper> <div class="vertical-down"><p>Standard</p></div> <div class="vertical-up"><p>nach oben</p></div> <div class="horizontal-rt"><p>nach rechts</p></div> <div class="horizontal-lt"><p>nach links</p></div> <div class="angle-bot-rt"><p>nach <br />unten rechts</p></div> <div class="angle-bot-lt"><p>nach <br />unten links</p></div> <div class="angle-top-rt"><p>nach rechts oben</p></div> <div class="angle-top-lt"><p>nach links oben</p></div> <div class="angle-120deg"><p>120deg</p></div> <div class="angle-290deg"><p>290deg</p></div> <Abschnittsklasse="radial"> <div class="radial-center"><p>Standard</p></div> <div class="radial-top"><p>oben</p></div> <div class="radial-size-1"><p>100px, 50px</p></div> <div class="radial-size-2"><p>70 % 90 % unten links</p></div> <div class="radial-various-1"><p>verschiedene 1</p></div> <div class="radial-various-2"><p>verschiedene 2</p></div> </section> <section class="color-stops"> <div class="color-stops-1"><p>Gelb 10 %, Grün</p></div> <div class="color-stops-2"><p>oben rechts, gelb, <br>grün 70 %, <br>blau</p></div> </section> </body> </html>
Körper {
Polsterung: 1,25em; /* 20px/16px, also 20px auf jeder Seite */
Schriftgröße: 100 %;
}
div {
schweben: links;
Höhe: 150px;
Rand: 10px;
Breite: 150px;
}
P {
Farbe: #fff;
Schriftart: fett 1,25em/1 serifenlos; /* 20px/16px */
Polsterung oben: 1,65em; /* 33px/16px */
Textausrichtung: Mitte;
}
/* HINWEIS: Die folgenden Farbverläufe haben die Standard-CSS3-Syntax. Die Browser, die sie unterstützen, sind Chrome 26+, Firefox 16+, IE 10+ und Opera 12.10+ Farbverlaufseffekte, aber auch mit dem Hersteller-Präfixcode, sodass die Farbverläufe auf mehreren älteren Browsern funktionieren. Ein Hintergrund mit einem „Fallback“-Kommentar ist die Farbe, die in Browsern angezeigt wird die die Verlaufssyntax nicht unterstützen. Sie können auch ein Hintergrundbild als Ersatz verwenden (entweder allein oder in Kombination mit einer Farbe). Zum Beispiel: Hintergrund: rote URL(gradient-image.jpg) no-repeat; .*/
/* LINEARE GRADIENTE
------------------------------------------ */
/* :::: Vertikal :::: */
.vertikal nach unten {
Hintergrund: Silber; /*Fallback*/
/* Standardverlauf, Sie müssen also nicht „nach unten“ vor den Farben angeben */
Hintergrund: linearer Farbverlauf (Silber, Schwarz);
}
.vertikal-up {
Hintergrund:silber;
Hintergrund: linearer Farbverlauf (nach oben, Silber, Schwarz);
}
/* :::: Horizontal :::: */
.horizontal-rt {
Hintergrund: Silber; /*Fallback*/
Hintergrund: linearer Farbverlauf (nach rechts, Silber, Schwarz);
}
.horizontal-lt {
Hintergrund: Silber; /*Fallback*/
Hintergrund: linearer Farbverlauf (nach links, silber, schwarz);
}
/* :::: Diagonale Winkel :::: */
/* Hinweis: Die Abbildungen auf Seite 377 zeigen Aqua als Ersatzfarbe, ich habe sie jedoch geändert
Wählen Sie unten „Marine“, da der weiße Text auf einem marineblauen Hintergrund besser lesbar ist.
.angle-bot-rt {
Hintergrund: Marine; /* Fallback */
Hintergrund: linearer Farbverlauf (unten rechts, Aqua, Marine);
}
.angle-bot-lt {
Hintergrund: Marine; /* Fallback */
Hintergrund: linearer Farbverlauf (unten links, Aqua, Marine);
}
.angle-top-rt {
Hintergrund: Marine; /* Fallback */
Hintergrund: linearer Farbverlauf (oben rechts, Aqua, Marine);
}
.angle-top-lt {
Hintergrund: Marine; /* Fallback */
Hintergrund: linearer Farbverlauf (oben links, Aqua, Marine);
}
/* :::: Winkel über Grad :::: */
.angle-120deg {
Hintergrund: Marine; /* Fallback */
Hintergrund: linearer Farbverlauf (120 Grad, Aqua, Marine);
}
.angle-290deg {
Hintergrund: Marine; /* Fallback */
Hintergrund: linearer Farbverlauf (290 Grad, Aqua, Marine);
}
/* RADIALSTEIGUNGEN
------------------------------------------ */
/* :::: Radial :::: */
.radial p {
Textschatten: 0 0 3px #000;
}
.radial-center {
Hintergrund: rot; /*Fallback*/
Hintergrund: radialer Farbverlauf (gelb, rot); /* Standard */
}
.radial-top {
Hintergrund: rot; /*Fallback*/
Hintergrund: radialer Farbverlauf (oben gelb, rot);
}
.radial-size-1 {
Hintergrund: rot; /*Fallback*/
Hintergrund: radialer Farbverlauf (100px 50px, gelb, rot);
}
.radial-size-2 {
Hintergrund: rot; /*Fallback*/
Hintergrund: radialer Farbverlauf (70 % 90 % unten links, gelb, rot);
}
.radial-various-1 {
Hintergrund: rot; /*Fallback*/
Hintergrund: radialer Farbverlauf (nächstliegende Seite bei 70 Pixel 60 Pixel, Gelb, Limette, Rot);
}
.radial-various-2 {
Hintergrund: rot; /*Fallback*/
Hintergrund: radialer Farbverlauf (30 Pixel, 30 Pixel bei 65 %, 70 %, Gelb, Limette, Rot);
}
/* LINEARE GRADIENTE MIT FARBSTOPPS
------------------------------------------ */
.color-stops div {
Rand unten: 30px;
}
.color-stops p {
Polsterung oben: 25px;
Textschatten: 0 0 3px #000;
}
.color-stops-2 p {
Schriftgröße: 18px;
Zeilenhöhe: 1,05;
}
.color-stops-1 {
Hintergrund: grün; /*Fallback*/
Hintergrund: linearer Farbverlauf (gelb 10 %, grün);
}
.color-stops-2 {
Hintergrund: grün; /*Fallback*/
Hintergrund: linearer Farbverlauf (nach rechts oben, Gelb, Grün 70 %, Blau);
} Geben Sie background: color oder background-color: color ein, wobei color eine Hexadezimalzahl, ein RGB-Wert oder ein beliebiger anderer unterstützter Farbname sein kann. Es ist am besten, RGBA-, HSL- oder HSLA-Werte nicht als Fallback-Hintergrundfarben zu verwenden (keine Sorge, wenn Sie IE nicht unterstützen möchten), da IE8 und frühere Versionen dies nicht unterstützen.
background: linear-gradient( . Wenn Sie möchten, dass die Verlaufsrichtung von oben nach unten verläuft (die Standardrichtung), können Sie diesen Schritt überspringen. Fügen Sie nach der Eingaberichtung ein Komma ein, und die Richtungen beziehen sich to top , to right , to bottom right , to top right usw. Oder fügen Sie nach der Eingaberichtung ein Komma ein, wobei sich die Richtung auf den Winkelwert bezieht (z. B. 45deg , 107deg usw.) Definieren Sie die Verlaufsfarbe entsprechend der später erwähnten „spezifizierten Farbe“ );background: radial-gradient( . Geben Sie die Form des Farbverlaufs an. Wenn Sie die Größe angeben möchten, können Sie diese anhand der in Schritt 3 angegebenen Größe selbst bestimmen. Andernfalls geben Sie circle oder ellipse ein. Geben Sie die Größe des Farbverlaufs an Wenn die Größe der automatisch angegebene Wert sein soll (der Standardwert ist „farthest-corner“, die am weitesten entfernte Ecke), geben Sie andernfalls einen Längenwert ein, der die Breite und Höhe des Farbverlaufs darstellt (z. B. 200px oder 7em ) oder ein Paar von Werten, die die Breite und Höhe darstellen ( 390px 175px oder 60% 85% ) Beachten Sie, dass, wenn nur ein Wert verwendet wird, der Wert kein Prozentsatz sein kann und Sie auch nicht closest-side , farthest-side , closest-corner oder farthest-corner eingeben können. Diese Schlüsselwörter geben an, wie weit sich der Farbverlauf relativ zu seiner Mitte ausdehnen kann. Sie können diesen Schritt überspringen at right wenn Sie möchten, dass der Farbverlauf at top der Mitte des Elements beginnt. at bottom left , at top right usw., um die Position des Verlaufszentrums darzustellen. Oder geben Sie ein Koordinatenpaar ein, das die Position des Verlaufszentrums darstellt, beginnend mit at , z. B. at 200px 43px at 30% 40% , at 50% -10px usw. Definieren Sie die Verlaufsfarbe ); Vervollständigen Sie den Verlauf. Verwenden Sie das opacity -Attribut, um die Transparenz eines Elements zu ändern. Die Methode besteht darin opacity: x einzugeben, wobei x die Opazität des Elements darstellt (zwei Dezimalstellen, ohne Einheit).
Der Standardwert der opacity ist 1 (völlig undurchsichtig) und der Bereich liegt zwischen 0~1 .
Durch die Verwendung des opacity -Attributs und des :hover -Pseudoattributs können Sie einige interessante und praktische Effekte erzielen. Beispielsweise kann img { opacity: .75; } das Bild standardmäßig auf 75 % Deckkraft einstellen, und img:hover { opacity: 1; } kann dazu führen, dass das Element undurchsichtig wird, wenn der Benutzer mit der Maus darüber fährt. Dieser Effekt tritt häufig auf, wenn Miniaturansichten mit Vollbildversionen verknüpft werden. Für Besucher verstärkt die Levitation die Bewegung des Bildes.
Das opacity und die transparente Hintergrundfarbe, die mithilfe von RGBA oder HSLA festgelegt wird, sind zwei Konzepte, die leicht verwechselt werden können. opacity wirkt sich auf das background-color: rgba(128,0,64,.6); Element (einschließlich seines Inhalts) aus, während sich eine solche Einstellung nur auf die Transparenz des Hintergrunds auswirkt.
Die Verwendung :before und :after ist eine großartige Möglichkeit, Ihren Seiten unglaubliche Designeffekte hinzuzufügen. Sie können mit dem content -Attribut kombiniert werden, um sogenannte generierte Inhalte zu erstellen. Generierter Inhalt bezieht sich auf Inhalte, die über CSS und nicht über HTML erstellt wurden.
... <p>Dieser Bereich ist einer der ruhigsten Orte in der Villa, während ich den Schatten der Bergahorn- und Lorbeerbäume und das Plätschern des Wassers aus zwei skulpturalen Brunnen genoss, musste ich daran denken: <a href="victoria.html" class="more">Weitere Informationen</a></p> ...
/* Der generierte Inhalt */
.more:after {
Inhalt: " "";
} Durch den obigen Code kann das Element mit class="more" einen Doppelpfeil danach anzeigen. Wenn Sie es in Zukunft ändern müssen, müssen Sie nur die .more Klasse ändern, ohne eine große Anzahl von HTML-Seiten zu ändern.
Text wird im Browser schnell angezeigt, Bilder verlangsamen jedoch tendenziell das Laden der Seite. Um dieses Problem zu lösen, können Sie mehrere Bilder zu einem einzigen Hintergrundbild ( sprite ) kombinieren und dann über CSS mithilfe des Attributs background-position steuern, welcher Teil des Bildes angezeigt wird.
.Dokumente li {
Rand oben: .45em;
}
/* Jeder Link im HTML hat diese Klasse */
.icon {
Anzeige: Inline-Block;
Zeilenhöhe: 1,1;
Schriftgröße: .875em;
min-height: 16px; /* auf die Höhe des Symbols eingestellt, damit es überhaupt nicht abgeschnitten wird */
Polsterung links: 23px;
Polsterung oben: 2px;
/* ermöglicht die Positionierung des Symbols absolut relativ zu Elementen mit class="icon" im HTML */
Position: relativ;
}
.icon:before {
Hintergrundbild: url(../img/sprite.png);
Inhalt: " ";
Anzeige: Block;
Höhe: 16px; /* Symbolhöhe */
links: 0; /* Standardeinstellung, wenn das Symbol an einer anderen Stelle angezeigt werden soll */
Position: absolut;
Breite: 16px; /* Symbolbreite */
top: 0; /* Standardeinstellung, wenn das Symbol an einer anderen Stelle angezeigt werden soll */
}
/* Position des Sprite-Bildes für alle Dokumentdateinamen verschieben, die mit .xls enden */
a[href$=".xls"]:before {
Hintergrundposition: -17px 0;
}
/* Position des Sprite-Bildes für alle Dokumentdateinamen verschieben, die mit .docx enden */
a[href$=".docx"]:before {
Hintergrundposition: -34px 0;
} sprite können auf beliebig viele Elemente angewendet werden. Verwenden Sie im obigen Beispiel .icon:before , um den gewünschten Effekt zu erzielen. Auf diese Weise ist sprite das Hintergrundbild des durch content: " "; Stellen Sie es auf display: block; ein, damit Sie die Höhe und Breite an die Größe des Symbols anpassen können. Ohne diese drei Eigenschaften wird das Bild nicht angezeigt. Durch die Verwendung von background-position können Sie das richtige Symbol an dieser Position platzieren.
Damit ist dieser Artikel über die Verwendung von CSS3 zur Verbesserung von Stileffekten abgeschlossen. Weitere Informationen zur Verbesserung von CSS3-Stileffekten finden Sie in den vorherigen Artikeln auf downcodes.com. Ich hoffe, Sie werden Downcodes in Zukunft unterstützen.