CSS/Eigenschaften/äußere Gestaltung/Außenlinie/outline-style
Aus SELFHTML-Wiki
< CSS | Eigenschaften | äußere Gestaltung | Außenlinie
Mithilfe der Eigenschaft outline-style können Sie verschiedene Schmuckrahmen für die Außenlinie definieren. Damit die Typen zur Geltung kommen, empfiehlt sich die Kombination mit Angaben zur Dicke oder zur Farbe der Außenlinie.
Beispiel
So sieht's aus
<!doctype html> <html> <head> <meta charset="utf-8"> <title>outline-style</title> <style> p {margin: 20px; padding: 10px; width: 30em; outline-width: 5px; outline-color: red;} .dotted {outline-style: dotted;} .dashed {outline-style: dashed;} .solid {outline-style: solid;} .double {outline-style: double;} .groove {outline-style: groove;} .ridge {outline-style: ridge;} .inset {outline-style: inset;} .outset {outline-style: outset;} </style> </head> <body> <p class="dotted">Textabsatz mit Außenlinientyp dotted.</p> <p class="dashed">Textabsatz mit Außenlinientyp dashed.</p> <p class="solid">Textabsatz mit Außenlinientyp solid.</p> <p class="double">Textabsatz mit Außenlinientyp double.</p> <p class="groove">Textabsatz mit Außenlinientyp groove.</p> <p class="ridge">Textabsatz mit Außenlinientyp ridge.</p> <p class="inset">Textabsatz mit Außenlinientyp inset.</p> <p class="outset">Textabsatz mit Außenlinientyp outset.</p> </body> </html>
Mit outline-style: können Sie den Rahmentyp festlegen. Erlaubt ist eine der folgenden Angaben
-
none= keine Außenlinie (bzw. unsichtbare Außenlinie). -
hidden= kein Außenlinie (bzw. unsichtbare Außenlinie), gedacht für Tabellenzellen -
dotted= gepunktet. -
dashed= gestrichelt. -
solid= durchgezogen. -
double= doppelt durchgezogen. -
groove= 3D-Effekt. -
ridge= 3D-Effekt. -
inset= 3D-Effekt. -
outset= 3D-Effekt.
