ألوان السيارات CSS

ألوان السيارات CSS

outline-color The 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 - execute color inversion (ensure 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 use hexadecimal values (HEX) to specify the outline color:

مثال

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;
}

تجربة شخصية