codestory

Die Anleitung zu CSS Outline

View more Tutorials:

Folge uns auf unserer fanpage, um jedes Mal benachrichtigt zu werden, wenn es neue Artikel gibt. Facebook

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:
thinSpeziell 1px.
mediumSpeziell 3px.
thickSpeziell 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:
nameDer Name der Farbe, wie red, blue, green,..
RGBEin Wert  RGB, wie rgb(255,10,20).
HexEin 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:

Vielleicht bist du interessiert

Das sind die Online-Courses außer der Website o7planning, die wir empfehlen. Sie können umsonst sein oder Discount haben.