outline-color
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since Juli 2015.
Die outline-color CSS-Eigenschaft legt die Farbe der Umrandung eines Elements fest.
Probieren Sie es aus
outline-color: red;
outline-color: #32a1ce;
outline-color: rgb(170 50 220 / 0.6);
outline-color: hsl(60 90% 50% / 0.8);
outline-color: currentColor;
<section class="default-example" id="default-example">
<div class="transition-all" id="example-element">
This is a box with an outline around it.
</div>
</section>
#example-element {
outline: 0.75em solid;
padding: 0.75em;
width: 80%;
height: 100px;
}
Syntax
/* <color> values */
outline-color: #f92525;
outline-color: rgb(30 222 121);
outline-color: blue;
/* Global values */
outline-color: inherit;
outline-color: initial;
outline-color: revert;
outline-color: revert-layer;
outline-color: unset;
Die Eigenschaft outline-color wird als einer der unten aufgeführten Werte angegeben.
Werte
<color>-
Die Farbe der Umrandung, angegeben als ein
<color>.
Die Spezifikation führt auch einen zusätzlichen Wert, auto, auf, der derzeit in keinem Browser unterstützt wird. Wenn implementiert, wird auto auf currentColor berechnet, es sei denn, outline-style ist auf auto gesetzt, dann wird es auf die Akzentfarbe berechnet.
Beschreibung
Eine Umrandung ist eine Linie, die um ein Element gezeichnet wird, außerhalb des border. Im Gegensatz zum Rahmen des Elements wird die Umrandung außerhalb des Rahmens des Elements gezeichnet und kann andere Inhalte überlagern. Der Rahmen hingegen wird tatsächlich das Layout der Seite ändern, um sicherzustellen, dass er passt, ohne etwas anderes zu überlagern (es sei denn, Sie setzen ihn ausdrücklich auf Überlappung).
Es ist oft bequemer, die Kurzformeigenschaft outline zu verwenden, wenn das Erscheinungsbild einer Umrandung definiert wird.
Barrierefreiheit
Angepasste Fokus-Stile beinhalten häufig Anpassungen der outline-Eigenschaft. Wenn die Farbe der Umrandung angepasst wird, ist es wichtig sicherzustellen, dass das Kontrastverhältnis zwischen ihr und dem Hintergrund, über dem die Umrandung platziert ist, hoch genug ist, damit Menschen mit Sehschwäche sie wahrnehmen können.
Das Kontrastverhältnis von Farben wird bestimmt, indem die Helligkeit der Text- und Hintergrundfarben verglichen wird. Um die aktuellen Richtlinien für barrierefreie Webinhalte (WCAG) zu erfüllen, ist ein Verhältnis von 4,5:1 für Textinhalte und 3:1 für größere Texte wie Überschriften erforderlich. Großer Text ist definiert als 18.66px und fett oder größer, oder 24px oder größer.
Formale Definition
| Anfangswert | auto |
|---|---|
| Anwendbar auf | alle Elemente |
| Vererbt | Nein |
| Berechneter Wert | Für das Schlüsselwort auto ist der berechnete Wert currentcolor. Für den Farbwert, falls der Wert durchscheinend ist, ist der berechnete Wert der entsprechende rgba() Wert. Falls nicht, ist er der entsprechende rgb() Wert. Das Schlüsselwort transparent wird zu rgba(0,0,0,0). |
| Animationstyp | Farbe |
Formale Syntax
outline-color =
auto |
<'border-top-color'>
<border-top-color> =
<color> |
<image-1D>
<image-1D> =
<stripes()>
<stripes()> =
stripes( <color-stripe># )
<color-stripe> =
<color> &&
[ <length-percentage> | <flex> ]?
<length-percentage> =
<length> |
<percentage>
Beispiele
Festlegen einer soliden blauen Umrandung
HTML
<p>My outline is blue, as you can see.</p>
CSS
p {
outline: 2px solid; /* Set the outline width and style */
outline-color: blue; /* Set the outline color */
margin: 5px;
}
Ergebnis
Spezifikationen
| Specification |
|---|
| CSS Basic User Interface Module Level 4 # outline-color |
Browser-Kompatibilität
Siehe auch
outlineoutline-widthoutline-style- Der
<color>Datentyp - Andere farbbezogene Eigenschaften:
color,background-color,border-color,text-decoration-color,text-emphasis-color,text-shadow,caret-color, undcolumn-rule-color