Die Anleitung zu CSS Outline

View more Tutorials:

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>

View more Tutorials: