CSS-Gliederungseigenschaften

Inhaltsverzeichnis

Ein Umriss ist eine Linie, die außerhalb des Elementrands gezeichnet wird.

This element has a black border and a green outline with a width of 10px.

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<head>
<style>
p {
  border: 2px solid black;
  outline: #4CAF50 solid 10px;
  margin: auto;  
  padding: 20px;
  text-align: center;
}
</style>
</head>
<body>

<h2>CSS Outline</h2>
<p>This element has a 2px black border and a green outline with a width of 10px.</p>

</body>
</html>

CSS-Übersicht

Ein Umriss ist eine Linie, die um Elemente AUSSERHALB der Ränder gezogen wird, um das Element „hervorzuheben“.

CSS verfügt über die folgenden Gliederungseigenschaften:

outline-style
outline-color
outline-width
outline-offset
outline

Hinweis: Umrisse weichen von den Rändern ab! Im Gegensatz zum Rand ist der Umriss außerhalb des Elementrandes gezeichnet und kann andere Inhalte überlappen. Auch die Gliederung ist KEIN Teil der Abmessungen des Elements; die Gesamtbreite und -höhe des Elements wird durch die Breite des Umrisses nicht beeinflusst.

CSS-Gliederungsstil

Die Eigenschaft outline-style gibt den Stil der Gliederung an. und kann einen der folgenden Werte haben:

dotted: - Definiert einen gepunkteten Umriss
dashed: - Definiert einen gestrichelten Umriss
solid: - Definiert einen durchgezogenen Umriss
double: - Definiert einen doppelten Umriss
groove: - Definiert einen 3D-Rillenumriss
ridge: - Definiert einen 3D-Rippenumriss
inset: - Definiert einen 3D-Einschubumriss
outset: - Definiert einen 3D-Anfangsumriss
none: - Definiert keine Gliederung
hidden: - Definiert einen ausgeblendeten Umriss

Das folgende Beispiel zeigt die verschiedenen outline-style-Werte:

Beispiel

Demonstration der verschiedenen Umrissstile:

 p.dotted {outline-style: dotted;}
p.dashed {outline-style: dashed;}
p.solid {outline-style: solid;}
p.double {outline-style: double;}
p.groove {outline-style: groove;}
p.ridge {outline-style: ridge;}
p.inset {outline-style: inset;}
p.outset {outline-style: outset;}

Ergebnis :

A dotted outline.

A dashed outline.

A solid outline.

A double outline.

A groove outline. The effect depends on the outline-color value.

A ridge outline. The effect depends on the outline-color value.

An inset outline. The effect depends on the outline-color value.

An outset outline. The effect depends on the outline-color value.

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<head>
<style>
p {outline-color:red;}

p.dotted {outline-style: dotted;}
p.dashed {outline-style: dashed;}
p.solid {outline-style: solid;}
p.double {outline-style: double;}
p.groove {outline-style: groove;}
p.ridge {outline-style: ridge;}
p.inset {outline-style: inset;}
p.outset {outline-style: outset;}
</style>
</head>
<body>

<h2>The outline-style Property</h2>

<p class="dotted">A dotted outline</p>
<p class="dashed">A dashed outline</p>
<p class="solid">A solid outline</p>
<p class="double">A double outline</p>
<p class="groove">A groove outline. The effect depends on the outline-color value.</p>
<p class="ridge">A ridge outline. The effect depends on the outline-color value.</p>
<p class="inset">An inset outline. The effect depends on the outline-color value.</p>
<p class="outset">An outset outline. The effect depends on the outline-color value.</p>

</body>
</html>

Hinweis: Keine der anderen Gliederungseigenschaften (über die Sie in den nächsten Kapiteln mehr erfahren werden) hat IRGENDEINE Auswirkung, es sei denn, die Die Eigenschaft class="w3-codespan">outline-style ist festgelegt!