Χρώμα Περιγραφής CSS

Χρώμα Περιγραφής CSS

outline-color This property is used to set the outline color.

Colors can be set in the following ways:

  • name - specify color names, such as "red"
  • HEX - specify hexadecimal values, such as "#ff0000"
  • RGB - specify RGB values, such as "rgb(255,0,0)"
  • HSL - specify HSL values, such as "hsl(0, 100%, 50%)"
  • invert - performs color inversion (ensures the outline is visible regardless of the background color)

The following example shows some different colors and outline styles. Note that these elements also have a black thin border inside the outline:

red solid line outline.

blue dotted outline.

gray protruding outline.

Παράδειγμα

p.ex1 {
  border: 2px solid black;
  outline-style: solid;
  outline-color: red;
}
p.ex2 {
  border: 2px solid black;
  outline-style: dotted;
  outline-color: blue;
}
p.ex3 {
  border: 2px solid black;
  outline-style: outset;
  outline-color: grey;
}

Δοκιμάστε το προσωπικά

HEX values

You can also specify the outline color using hexadecimal values (HEX):

Παράδειγμα

p.ex1 {
  outline-style: solid;
  outline-color: #ff0000; /* red */
}

Δοκιμάστε το προσωπικά

RGB values

or by using RGB values:

Παράδειγμα

p.ex1 {
  outline-style: solid;
  outline-color: rgb(255, 0, 0); /* red */
}

Δοκιμάστε το προσωπικά

Τιμές HSL

Μπορείτε επίσης να χρησιμοποιήσετε τιμές HSL:

Παράδειγμα

p.ex1 {
  outline-style: solid;
  outline-color: hsl(0, 100%, 50%); /* Κόκκινο */
}

Δοκιμάστε το προσωπικά

Μπορείτε να βρείτε τις τιμές Χρώματα CSS Μάθετε περισσότερα για τις τιμές HEX, RGB και HSL στην ενότητα.

περιστροφή χρώματος

Το παρακάτω παράδειγμα χρησιμοποιεί outline-color: invertΕκτέλεσε την περιστροφή χρώματος. Αυτό διασφαλίζει ότι η ορίων της γραμμής θα είναι ορατή ανεξάρτητα από το χρώμα του παρασκηνίου:

Περιστροφή χρώματος της ορίων της γραμμής.

Παράδειγμα

p.ex1 {
  border: 1px solid yellow;
  outline-style: solid;
  outline-color: invert;
}

Δοκιμάστε το προσωπικά