CSS - Umrisse

Umrisse sind den Grenzen sehr ähnlich, aber es gibt auch nur wenige wesentliche Unterschiede -

Eine Gliederung nimmt keinen Platz ein.
Umrisse müssen nicht rechteckig sein.
Der Umriss ist auf allen Seiten immer gleich. Sie können keine unterschiedlichen Werte für verschiedene Seiten eines Elements angeben.

NOTE - Die Gliederungseigenschaften werden von IE 6 oder Netscape 7 nicht unterstützt.

Sie können die folgenden Gliederungseigenschaften mithilfe von CSS festlegen.

Das outline-width Mit der Eigenschaft wird die Breite des Umrisses festgelegt.
Das outline-style Mit der Eigenschaft wird der Linienstil für die Gliederung festgelegt.
Das outline-color Mit der Eigenschaft wird die Farbe des Umrisses festgelegt.
Das outline Mit property werden alle drei oben genannten Eigenschaften in einer einzigen Anweisung festgelegt.

Die Gliederungsbreiteneigenschaft

Die outline-Breite - Eigenschaft gibt die Breite der Kontur an die Box hinzugefügt werden. Sein Wert sollte eine Länge oder einer der Werte dünn, mittel oder dick sein, genau wie das Attribut für die Rahmenbreite.

Eine Breite von null Pixel bedeutet keine Kontur.

Hier ist ein Beispiel -

<html>
   <head>
   </head>
   
   <body>
      <p style = "outline-width:thin; outline-style:solid;">
         This text is having thin outline.
      </p>
      <br />
      
      <p style = "outline-width:thick; outline-style:solid;">
         This text is having thick outline.
      </p>
      <br />
      
      <p style = "outline-width:5px; outline-style:solid;">
         This text is having 5x outline.
      </p>
   </body>
</html>

Es wird das folgende Ergebnis erzeugt -

Die Eigenschaft im Gliederungsstil

Die Eigenschaft " Gliederungsstil" gibt den Stil für die Linie (durchgehend, gepunktet oder gestrichelt) an, die um ein Element verläuft. Es kann einen der folgenden Werte annehmen -

none- Keine Grenze. (Äquivalent der Umrissbreite: 0;)
solid - Umriss ist eine einzelne durchgezogene Linie.
dotted - Umriss ist eine Reihe von Punkten.
dashed - Gliederung ist eine Reihe von kurzen Linien.
double - Umriss ist zwei durchgezogene Linien.
groove - Die Gliederung sieht aus, als wäre sie in die Seite eingraviert.
ridge - Outline sieht das Gegenteil von Groove aus.
inset - Durch die Gliederung sieht das Feld so aus, als wäre es in die Seite eingebettet.
outset - Umriss lässt die Box so aussehen, als würde sie aus der Leinwand kommen.
hidden - Wie keine.

Hier ist ein Beispiel -

<html>
   <head>
   </head>
   
   <body>
      <p style = "outline-width:thin; outline-style:solid;">
         This text is having thin solid  outline.
      </p>
      <br />
      
      <p style = "outline-width:thick; outline-style:dashed;">
         This text is having thick dashed outline.
      </p>
      <br />
      
      <p style = "outline-width:5px;outline-style:dotted;">
         This text is having 5x dotted outline.
      </p>
   </body>
</html>

Es wird das folgende Ergebnis erzeugt -

Die Umrissfarben-Eigenschaft

Mit der Eigenschaft Konturfarbe können Sie die Farbe der Kontur angeben. Sein Wert sollte entweder ein Farbname, eine Hex-Farbe oder ein RGB-Wert sein, wie bei den Eigenschaften Farbe und Rahmenfarbe.

Hier ist ein Beispiel -

<html>
   <head>
   </head>
   
   <body>
      <p style = "outline-width:thin; outline-style:solid;outline-color:red">
         This text is having thin solid red  outline.
      </p>
      <br />
      
      <p style = "outline-width:thick; outline-style:dashed;outline-color:#009900">
         This text is having thick dashed green outline.
      </p>
      <br />
      
      <p style = "outline-width:5px;outline-style:dotted;outline-color:rgb(13,33,232)">
         This text is having 5x dotted blue outline.
      </p>
   </body>
</html>

Es wird das folgende Ergebnis erzeugt -

Die Gliederungseigenschaft

Die Umriss- Eigenschaft ist eine Kurzform-Eigenschaft, mit der Sie Werte für eine der drei zuvor beschriebenen Eigenschaften in beliebiger Reihenfolge, aber in einer einzigen Anweisung angeben können.

Hier ist ein Beispiel -

<html>
   <head>
   </head>
   
   <body>
      <p style = "outline:thin solid red;">
         This text is having thin solid red outline.
      </p>
      <br />
      
      <p style = "outline:thick dashed #009900;">
         This text is having thick dashed green outline.
      </p>
      <br />
      
      <p style = "outline:5px dotted rgb(13,33,232);">
         This text is having 5x dotted blue outline.
      </p>
   </body>
</html>

Es wird das folgende Ergebnis erzeugt -