CSS-Outline | strassencoder.ch

CSS Outline

CSS hat folgende outline-Eigenschaften:

outline-style

outline-color

outline-width

outline-offset

outline

Die outline-style Eigenschaft spezifiziert den Stil vom Outline, es kann einen der folgenden Werte haben:

dotted

dashed

solid

double

groove-Effekt

ridge-Effekt

inset-Effekt

outset-Effekt

Die outline-style Eigenschaft spezifiziert den Stil vom outline, es kann einen der folgenden Werte haben:

<!DOCTYPE html>

<html>

<head>

<style>

p {outline-color:dodgerblue;}

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>Die outline-style Eigenschaf</h2>

<p class="dotted">ein gepunktetes Outline.</p>

<p class="dashed">ein gestricheltes Outline.</p>

<p class="solid">ein durchgezogenes Outline.</p>

<p class="double">Ein doppeltes Outline.</p>

<p class="groove">ein Outline mit 3D-Effekt.</p>

<p class="ridge">ein Outline mit 3D-Effekt.</p>

<p class="inset">ein Outline mit 3D-Effekt.</p>

<p class="outset">ein Outline mit 3D-Effekt.</p>

</body>

</html>

<!DOCTYPE html>

<html>

<head>

<style>

p.ex1 {

border: 1px solid black;

outline-style: solid;

outline-color: orange;

outline-width: thin;

}

p.ex2 {

border: 1px solid black;

outline-style: solid;

outline-color: dodgerblue;

outline-width: medium;

}

p.ex3 {

border: 1px solid black;

outline-style: solid;

outline-color: orange;

outline-width: thick;

}

p.ex4 {

border: 1px solid black;

outline-style: solid;

outline-color: dodgerblue;

outline-width: 4px;

}

</style>

</head>

<body>

<h2>Die outline-width Eigenschaft</h2>

<p class="ex1">Eine dünnes Outline.</p>

<p class="ex2">Ein mittleres Outline.</p>

<p class="ex3">Ein breites Outline.</p>

<p class="ex4">Ein 4px breites Outline.</p>

</body>

</html>

Die outline-color Eigenschaft bestimmt die Farbe eines Outline.

Die Farbe kann definiert weren mit:

Name"rot".

HEX, wie "#ff0000".

RGB, wie "rgb(255,0,0)"

HSL, wie "hsl(0, 100%, 50%)"

<!DOCTYPE html>

<html>

<head>

<style>

p.ex1 {

border: 1px solid black;

outline-style: solid;

outline-color: grey;

outline-width: thin;

}

p.ex2 {

border: 1px solid black;

outline-style: solid;

outline-color: hsl(210,100%,56%); /* dodgerblue */

outline-width: medium;

}

p.ex3 {

border: 1px solid black;

outline-style: solid;

outline-color: #ffa500; /* orange */

outline-width: thick;

}

p.ex4 {

border: 1px solid black;

outline-style: solid;

outline-color: rgb(190,190,190); /* grey */

outline-width: 4px;

}

</style>

</head>

<body>

<h2>Die outline-color Eigenschaft</h2>

<p class="ex1">Eine dünnes Outline mit der Farbe grau.</p>

<p class="ex2">Ein mittleres Outline mit der Farbe dodgerblue.</p>

<p class="ex3">Ein breites Outline mit der Farbe orange.</p>

<p class="ex4">Ein 4px breites Outline mit der Farbe hellgrau.</p>

</body>

</html>

CSS Outline

Die outline Eigenschaft ist ein kurzschreibweise für folgende outline-Eigenschaften:

outline-width

outline-style

outline-color

Die outline Eigenschaft spezifiziert eine, zwei oder drei Werte von der Liste oben. Das folgende Beispiel zeigt einige kurzschreibweisen mit der outline Eigenschaft:

<!DOCTYPE html>

<html>

<head>

<style>

p.ex1 {outline: dashed;}

p.ex2 {outline: dotted dodgerblue;}

p.ex3 {outline: 5px solid orange;}

p.ex4 {outline: thick ridge grey;}

</style>

</head>

<body>

<h2>Die outline-Eigenschaft</h2>

<p class="ex1">Ein gestricheltes outline.</p>

<p class="ex2">Ein gepunktetes outline.</p>

<p class="ex3">Ein 5px durchgezogenes orange outline.</p>

<p class="ex4">Ein breites ridge grau outline.</p>

</body>

</html>

Die outline-Offset Eigenschaft fügt Leerraum zwischen das outline und dem border-Umriss eines Elementes ein.

Der Leeraum ist transparent. Das folgende Beispiel spezifiziert ein outline 20px ausserhalb des border-Umriss:

<!DOCTYPE html>

<html>

<head>

<style>

p {

margin: 20px;

border: 1px solid black;

outline: 1px solid orange;

outline-offset: 20px;

}

</style>

</head>

<body>

<h2>Die outline Offset-Eigenschaft</h2>

<p>Dieser Absatz hat ein Outline 20px ausserhalb des border-Umriss.</p>

</body>

</html>