CSS Kontur Renkleri

CSS Kontur Renkleri

outline-color Özellik, kenarlık rengini ayarlamak için kullanılır.

Renkleri aşağıdaki gibi ayarlayabilirsiniz:

  • name - Renk adını belirleyin, örneğin "red"
  • HEX - Onaltılık değeri belirleyin, örneğin "#ff0000"
  • RGB - RGB değeri belirleyin, örneğin "rgb(255,0,0)"
  • HSL - HSL değeri belirleyin, örneğin "hsl(0, 100%, 50%)"
  • invert - Renk çevirme (kenarlık ne kadar renkli olursa olsun, arka plan rengi ne olursa olsun kenarlık görülür)

Aşağıda, farklı renklerin farklı kenarlık stillerini gösteren bir örnek verilmiştir. Lütfen dikkat edin, bu öğeler kenarlık içinde siyah ince çerçeve çizgisi de içerir:

kırmızı çizgili kenarlık.

mavi noktalı kenarlık.

gri çıkıntılı kenarlık çizgisi.

Örnek

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

Kendi Kendine Deney

HEX değeri

Ayrıca, kenarlık rengini onaltılık değerle (HEX) belirleyebilirsiniz:

Örnek

p.ex1 {
  outline-style: solid;
  outline-color: #ff0000; /* kırmızı */
}

Kendi Kendine Deney

RGB değeri

veya RGB değeri kullanarak:

Örnek

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

Kendi Kendine Deney

HSL Değerleri

Ayrıca HSL değerlerini kullanabilirsiniz:

Örnek

p.ex1 {
  outline-style: solid;
  outline-color: hsl(0, 100%, 50%); /* Kırmızı */
}

Kendi Kendine Deney

Araçlarımızda CSS Renkleri HEX, RGB ve HSL değerleri hakkında daha fazla bilgiyi bu bölümden öğrenebilirsiniz.

renklerin tersini çizer

Aşağıdaki örnek outline-color: invert，renklerin tersini çizmiş. Bu, renk arka plan ne olursa olsun, çizginin görülebilir olmasını sağlar:

Renklerin tersini çizen kalın çizgi.

Örnek

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

Kendi Kendine Deney