Die Anleitung zu CSS Outline

CSS Outline
CSS outline-style
CSS outline-width
CSS outline-color
CSS outline-offset

1. CSS Outline

CSS Outline erstellt so etwas wie einen Rand (border). Es wird um das Element und außerhalb des Rahmen gezeichnet. Es hilft das Element. sich hervorzuheben.

Anders als den Rand belegt Outline keinen Platz um ein Element. Gemäß der Spezifikation ist Outline kein Rechteck, obwohl Sie das Gefühl immer haben, dass es wie ein Rechteck ist.

/* style */
outline: solid;

/* color | style */
outline: #f66 dashed;

/* style | width */
outline: inset thick;

/* color | style | width */
outline: green solid 3px;

/* Global values */
outline: inherit;
outline: initial;
outline: unset;

Zum Beispiel:

Outline wird um das Element herum und außerhalb des Randes gerechnet. Es nimmt keinen Platz um das Element. Wenn Outline daher die größe Breite hat, kann es die andere Inhalt außerhalb des Elements überlappen. Sehen Sie das folgende Beispiel:

Some content 1
<div style="border: 3px solid gray; outline: AliceBlue solid 10px;padding:10px;">
    border: 3px solid gray; <br/>
    outline: AliceBlue  solid 10px;
</div>
Some content 2

Die Syntax vom CSS Outline:

/* Syntax:  */
outline: color  style width;
/* style: required */

Oder:

outline-color: color;
outline-style: style;
outline-width: width;

2. CSS outline-style

CSS outline-style wird benutzt um das Typ vom Outline festzulegen. Es kann eine der folgenden Werten bekommen

dotted
dashed
solid
double
groove
ridge
inset
outset
none
hidden

Die Werte wie groove, ridge, inset, outset erzeugt ein 3D Outline, das das Element umgibt. Das 3D Effekt hängt von der Wert von CSS outline-color ab.

In dem folgenden Beispiel habe ich die Wert CSS outline-width auf 10px gesetzt. Diese Wert ist groß genug, damit Sie den Unterschied von den verschiedenen Outline-style sehen.

outline-style-example.html

<!DOCTYPE html>
<html>
   <head>
      <title>CSS Outline</title>
      <meta charset="UTF-8"/>
      <style>
         p {
           padding: 5px;
           outline-color: green;
           outline-width: 10px;
           margin: 30px 5px;
         }
         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>
      <h3>CSS outline-style</h3>

      <p class="dotted">
          dotted - A series of round dots.
      </p>
      <p class="dashed">
        dashed - A series of square-ended dashes.
      </p>
      <p class="solid">
         solid - A single line segment.
      </p>
      <p class="double">
        double - Two parallel solid lines with some space between them.
        When using this value, the border-width value determines the
        sum of the lines and the space between them.
      </p>
      <p class="groove">
          groove - Looks as if it were carved in the canvas.
      </p>
      <p class="ridge">ridge - Looks as if it were coming out of the canvas.</p>
      <p class="inset">
        inset - Looks as if the content on the inside of the border is sunken into the canvas.
        Treated as ridge in the collapsing border model.
      </p>
      <p class="outset">
        outset - Looks as if the content on the inside of the border is coming out of the canvas.
        Treated as groove in the collapsing border model.
      </p>
   </body>
</html>

none vs hidden

CSS outline-style:none und CSS outline-style:hidden sind identisch, sodass das Element kein Outline hat.

3. CSS outline-width

CSS outline-width legt die Breite von Outline fest. Es kann eine der folgenden Werte bekommen:

thin	Speziell 1px.
medium	Speziell 3px.
thick	Speziell 5px.
px, pt, cm, em,...	Ein speziele Zahl, z.B 1px, 1pt, 2cm, 2em,...

outline-width-example.html

<!DOCTYPE html>
<html>
   <head>
      <title>CSS Outline</title>
      <meta charset="UTF-8"/>
      <style>
         p {
           padding: 5px;
           outline-style: outset;
           outline-color: green;
           margin: 30px 5px;
           border: 1px solid red;
         }
      </style>
   </head>
   <body>
      <h3>CSS outline-width</h3>
      <p style="outline-width:1px">
          outline-width:1px
      </p>
      <p style="outline-width:5px">
        outline-width:5px
      </p>
      <p style="outline-width:10px">
         outline-width:10px
      </p>
   </body>
</html>

4. CSS outline-color

CSS outline-color wird benutzt um die Farbe für Outline einzustellen. Seine Werte können sein:

name	Der Name der Farbe, wie red, blue, green,..
RGB	Ein Wert RGB, wie rgb(255,10,20).
Hex	Ein Wert Hex, wie #ff0000.
invert	Der Browser wird automatisch eine entsprechende Farbe angeben, um sicherzustellen, dass das sichtbar ist (mit den Hintergrundfarben um das Element nicht verwechseln).

Zum Beispiel:

outline-color-example.html

<!DOCTYPE html>
<html>
   <head>
      <title>CSS Outline</title>
      <meta charset="UTF-8"/>
      <style>
         p {
           padding: 5px;
           outline-style: inset;
           outline-width: 10px;
           margin: 30px 15px;
           border: 1px solid red;
         }
      </style>
   </head>
   <body>
      <h3>CSS outline-color</h3>
      <p style="outline-color:yellow">
          outline-color:yellow;
      </p>
      <p style="outline-color:blue">
        outline-color:blue;
      </p>
      <p style="outline-color:green">
         outline-color:green;
      </p>
   </body>
</html>

5. CSS outline-offset

CSS outline-offset wird benutzt um den Abstand zwischen Outline und die Elementgrenzen zu erstellen.

Seine Werte könne sein:

Ein spezieller Wert, wie 1px, 2em, 3cm,...
initial
inherit

Der Default-Wert von outline-offset ist 0, d.h Outline wird nach Default nahe am Elementgrenzen gezeichnet.ö

outline-offset-example.html

<!DOCTYPE html>
<html>
<head>
    <title>CSS Outline</title>
    <meta charset="UTF-8"/>
    <style>
       .my-div {
          border: 3px solid gray;
          outline: green dotted 10px;
          padding:10px;
          margin: 25px;
          outline-offset: 10px;
       }
    </style>
</head>
<body>
    <h3>CSS outline-offset</h3>
    <div class ="my-div">
        border: 3px solid gray; <br/>
        outline: green dotted 10px; <br/>
        padding:10px; <br/>
        margin: 40px; <br/>
        outline-offset: 10px;
    </div>
</body>
</html>