Eine kurze Diskussion darüber, wie man CSS verwendet, um durchscheinende Ränder und mehrere Randeffekte zu erzielen

Dieser Artikel führt Sie in zwei Szenarien in CSS ein, um durchscheinende Ränder und mehrere Randeffekte zu erzielen. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird für alle hilfreich sein.

(Lernvideo-Sharing: CSS-Video-Tutorial)

Szenario 1:

Implementieren eines durchscheinenden Rahmens:

Aufgrund des Standardverhaltens von CSS-Stilen ist der Rendering-Bereich der Hintergrundfarbe unterschiedlich ist Inhalt+Auffüllung +Rahmen.

Der durchscheinende Rand wird durch die Hauptfarbe beeinflusst und der erzielte Effekt ist

Lösung:

Verwenden Sie das Attribut „background-clip“, um den Zeichenbereich des Hintergrunds anzugeben, sodass der Der Zeichenbereich ist auf Inhalt + Auffüllung beschränkt.

div {
border:10px solid rgba(0,0,0,.5);
background: lightblue;
background-clip: padding-box;
}

Hinzugefügt: Hintergrundclip ist nicht kompatibel mit IE6-8, Opera10 Die Effekte sind wie folgt:

div {
background:#c3e6f4;
box-shadow:0 0 0 15px #b7dae6,0 0 0 30px #cce2ea;
}

Option 2: Boxrand kombiniert mit Strichattribut (Umriss)

Eigenschaften: Es können nur doppelte Ränder erreicht werden, was flexibler ist und gepunktete Linien und andere Effekte verwenden kann

Der Code und Wirkung sind wie folgt:

div {
border: 6px dashed #c3f4ec;
outline: 10px solid #d9faf6;
background-clip: padding-box;
}

Für mehr Programmierkenntnisse besuchen Sie bitte: Programmiervideos

! !

Das obige ist der detaillierte Inhalt vonEine kurze Diskussion darüber, wie man CSS verwendet, um durchscheinende Ränder und mehrere Randeffekte zu erzielen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!