Wir geben Tipps zur Verwendung von CSS-Randeffekten

Wie erreicht man durchscheinende Ränder? Wie implementiert man mehrere Grenzen? In diesem Artikel werden Techniken zum Implementieren von CSS-Randeffekten beschrieben.

Dieser Artikel enthält Techniken zum Implementieren von CSS-Randeffekten als Referenz.

1. Implementierung von durchscheinenden Rändern

Wir haben eine Anforderung: in einem Bereich mit einem Hintergrund Bild, definieren einen Bereich mit weißem p mit durchscheinendem weißem Rand . Das erste, was mir bei der Implementierung in den Sinn kommt, ist, dass Sie Transparenz für den Rand definieren können. Der Code lautet wie folgt:

p{   
background:white;   
border:20px solidhsla(0,0%,100%,.5);   
}

Hier ist hsla eine Methode von Definition der Farbe und ihrer verschiedenen Parameter Die Bedeutung ist wie folgt:

H: Farbton (Farbton). 0 (oder 360) steht für Rot, 120 steht für Grün, 240 steht für Blau und andere Werte können auch zur Angabe von Farben verwendet werden. Der Wert ist: 0 - 360

S: Sättigung. Der Wert ist: 0,0 % – 100,0 %

L: Helligkeit. Der Wert ist: 0,0 % – 100,0 %

A: Alpha-Transparenz. Der Wert liegt zwischen 0 und 1

Als wir die obige Stileinstellung im Browser ausgeführt haben, stellten wir fest, dass das gewünschte Ergebnis nicht angezeigt wurde. p ist nur ein reinweißes p ohne Randeffekt.

Der Grund für dieses Problem ist, dass das weiße p den durchscheinenden weißen Rand blockiert. Denn wenn ein p auf Weiß gesetzt ist, dann ist die gesamte Farbe des Boxmodells dieses p weiß. Wenn ein durchscheinender weißer Rand festgelegt ist, wird dieser nicht angezeigt, wenn er in diesem weißen p platziert wird (es gibt keine Möglichkeit, den Rand anzuzeigen, wenn er durch die weiße Farbe von p hervorgehoben wird).

Um dieses Problem zu lösen, müssen Sie das neue -Attribut in CSS3 verwenden – background-clip. background-clip gibt den Zeichenbereich des Hintergrunds an:

border-box Der Hintergrund wird auf die Randbox zugeschnitten

padding-box Der Hintergrund wird auf die Auffüllbox

zugeschnitten

content-box Der Hintergrund wird auf die Inhaltsbox zugeschnitten

Standardmäßig ist der Wert von „background-clip“ „border-clip“, was bedeutet, dass der definierte Hintergrund auf das gesamte Modell angewendet wird Im obigen Beispiel wurde das gesamte p markiert. Alle Kanten sind weiß. Wenn wir also den Attributwert „background-clip“ auf „padding-box“ setzen, können wir den äußeren Rand ohne Farbe füllen und den eingestellten durchscheinenden Rand anzeigen. Der Code lautet wie folgt:

p{   
       background:white;   
       border:20pxsolid hsla(0,0%,100%,.5);   
       background-clip:padding-box;   
}

Wenn der auf diese Weise festgelegte Stil im Browser erneut ausgeführt wird, erscheint der erwartete weiße, durchscheinende Randeffekt.

2. Mehrere Ränder

Manchmal müssen Sie für den besonderen Effekt eines Elements mehrere Ränder hinzufügen. Hier sind zwei Methoden zum Hinzufügen mehrerer Ränder .

1.box-shadow

Das box-shadow-Attribut kann den Schatten für das Boxmodell festlegen. Tatsächlich hat es aber auch die Funktion, Grenzen zu setzen.

box-shadow kann fünf Parameter übergeben. Die ersten beiden Parameter repräsentieren den Versatz der Projektion, der dritte Parameter repräsentiert den Unschärfegrad der Projektion, der vierte Parameter repräsentiert die Erweiterung der Projektion und der letzte Parameter stellt die Farbe der Projektion dar. Allerdings verwenden wir den vierten Parameter hier selten, um die Projektion zu erweitern. Durch Festlegen eines geeigneteren Werts kann der Effekt des Randes simuliert werden.

In ähnlicher Weise kann das Box-Shadow-Attribut eine Liste mehrerer Schatten übergeben, getrennt durch ",". Solange wir also eine Schattenliste definieren und den Wert ihres Erweiterungsparameters schrittweise erhöhen, können wir den Effekt mehrerer Grenzen zeichnen.

2.Umriss

Wenn wir nur zwei Rahmenebenen zeichnen müssen, können wir dies auch mit tun Gliederung. Der Umriss ist eine Ebene außerhalb des Randes, was dem Randprinzip entspricht. Durch Festlegen des Umrissstils können Sie eine weitere Rahmenebene außerhalb des Rahmens festlegen.

Es ist jedoch zu beachten, dass sich der durch das Umrissattribut festgelegte Rahmen mit der Änderung des Rahmenstils des internen Elements nicht ändert. Mit anderen Worten: Wenn der Elementrand abgerundete Ecken hat, ist der äußerste Rand, der durch Umriss gezeichnet wird, immer noch rechteckig. Dies ist ein Mangel bei der Umrisszeichnung von Rändern.

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass Sie die Fähigkeiten zur CSS-Grenzimplementierung beherrschen.

Das obige ist der detaillierte Inhalt vonWir geben Tipps zur Verwendung von CSS-Randeffekten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!