Wie wird das CSS-Outline-Attribut verwendet? Der Unterschied zwischen Umrissattributen und Randattributen (Beispiel)-CSS-Tutorial-php.cn

Wie wird das CSS-Outline-Attribut verwendet? Der Unterschied zwischen Umrissattributen und Randattributen (Beispiel)

青灯夜游

Freigeben： 2018-09-14 11:07:52

Original

4123 Leute haben es durchsucht

In diesem Kapitel erfahren Sie, wie Sie das CSS-Outline-Attribut verwenden. Der Unterschied zwischen dem Umrissattribut und dem Randattribut (Beispiel) , damit jeder etwas Wissen über das Umrissattribut in CSS sowie den Unterschied zwischen dem Umriss- und dem Randattributunterschied verstehen kann. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird Ihnen hilfreich sein.

1. Was ist das CSS-Outline-Attribut (Outline)? Der Rand des Randes Die Peripherie kann die Rolle des Hervorhebens von Elementen spielen. Zum Beispiel: Wenn wir normalerweise den Inhalt im Browser lesen und mit der Maus auf einen Tag-Link oder ein Eingabe-Optionsfeld klicken, um den Fokus zu erhalten, wird das Element von einer konturierten, gestrichelten Box umgeben. Dieser gepunktete Rahmen ist der Umriss.

Wenn Sie auf ein Tag klicken, eine Eingabe machen oder ein Mausklickereignis hinzufügen, hinterlässt der Browser standardmäßig einen Umrissrahmen (blau unter Chrom). Allerdings beeinträchtigen diese standardmäßigen Umrissrahmen manchmal das Erscheinungsbild und zerstören den Gesamteffekt der Frontend-Seite. Wir möchten sie nicht wirklich beibehalten. Wie kann man also den standardmäßigen Umrissrahmen des Browsers entfernen oder den standardmäßigen Umrissrahmeneffekt ändern?

Das Outline-Attribut von CSS ermöglicht es uns, den standardmäßigen Outline-Punkte-Box-Effekt zu ändern. Das Gliederungsattribut hat die folgenden verwandten Attribute:

outline: Legt alle Gliederungsattribute in einer Anweisung fest.

outline-style: Legt den Stil von fest der Umriss
outline-width: Legt die Breite des Umrisses fest
outline-color: Legt die Farbe des Umrisses fest
Umriss-Offset: Versetzen Sie den Umriss und zeichnen Sie ihn am Rand des Rahmens
Das erste verwandte Attribut Umriss ist eine Kurzform, die Das Format lautet:
```
outline: outline-color || outline-style || outline-width；
```
Nach dem Login kopieren
Lassen Sie uns die zugehörigen Stile der Gliederung nicht einzeln festlegen, sondern können die Einstellungen sofort abschließen.

Sehen wir uns anhand des folgenden Beispiels an, wie das CSS-Umrissattribut verwendet wird:

Wenn Sie möchten, dass der Link beim Fokussieren auffälliger ist, können Sie die Umrisslinie auf einstellen rot, wie folgt:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>轮廓--outline</title>
		<style>
			
			.a { outline:5px solid red; }
		</style>
	</head>
	<body>
			<a href="#">我是默认下的连接</a><br /><br />
			<a href="#" class="a">我是一个测试连接，会红</a>
	</body>
</html>

Nach dem Login kopieren

Die Darstellung ist wie folgt:

Und wenn Sie nur die Umrisslinien auf der Registerkarte entfernen möchten, die sich auf die Schönheit auswirken , das Umrissattribut kann wie folgt festgelegt werden:

.tab{ outline: none; ...... /* other properties */}

Nach dem Login kopieren

Aus dem obigen Beispiel können wir ersehen, dass Umriss und Rand sehr ähnlich sind, Umriss und Rand jedoch ähnlich, aber unterschiedlich. Wie wird das CSS-Outline-Attribut verwendet? Der Unterschied zwischen Umrissattributen und Randattributen (Beispiel)

2. Der Unterschied zwischen Umriss und Rand

Der Umriss nimmt keinen zusätzlichen Platz ein Breite oder Höhe; der Rand nimmt die Breite ein; daher hat der Umriss keinen Einfluss auf die Größe oder Position des Elements, wie dies bei einem Rand der Fall ist.

Umriss kann nicht rechteckig sein; der Rand ist ein gewöhnlicher Rand.
outline ist für Elemente wie Links, Formularsteuerelemente und ImageMap-Rahmen konzipiert und kann auf fast alle greifbaren HTML-Elemente angewendet werden.

Das obige ist der detaillierte Inhalt vonWie wird das CSS-Outline-Attribut verwendet? Der Unterschied zwischen Umrissattributen und Randattributen (Beispiel). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!