CSS Kontur

Bu element, 10px genişliğinde siyah kenar ve mavi kontura sahiptir.

CSS Kontur

Kontur, element etrafında çizilen ve elementi ön plana çıkaran bir çizgidir, kenar çizgisi dışında yer alır.

CSS, aşağıdaki kontur özelliklerine sahiptir:

  • outline-style
  • outline-color
  • outline-width
  • outline-offset
  • outline

Dikkat:Kontur ileKenarlıkFarklı! Farklılık, konturun element kenar çizgisi dışında çizildiği ve diğer içeriklerle çakışabileceği gerçeğidir. Aynı şekilde, kontur da element ölçeğinin bir parçası değildir; elementin toplam genişliği ve yüksekliği kontur çizgisi genişliğinden etkilenmez.

CSS Kontur Stili

outline-style özelliği, konturun stilini belirtir ve aşağıdaki değerleri ayarlayabilir:

  • noktalı - Noktalı konturu tanımla.
  • dağınık - Dağınık çizgili konturu tanımla.
  • sert - Sıradan çizgili konturu tanımla.
  • çift - İki çizgili konturu tanımla.
  • yarık - 3D delikli çukur konturu tanımla.
  • tepe - 3D çıkıntılı çukur konturu tanımla.
  • delik - 3D delikli konturu tanımla.
  • çıkıntı - 3D çıkıntılı konturu tanımla.
  • yok - Konturu tanımla.
  • gizli - Gizli konturu tanımla.

Aşağıdaki örnek, farklı outline-style değerlerini gösterir:

Örnek

Farklı kontur stillerini gösterme:

p.noktalı {çizgi-stili: noktalı;}
p.dağınık {çizgi-stili: dağınık;}
p.sert {çizgi-stili: sert;}
p.çift {çizgi-stili: çift;}
p.yarık {çizgi-stili: yarık;}
p.tepe {çizgi-stili: tepe;}
p.inset {outline-style: inset;}
p.outset {outline-style: outset;}

Sonuç:

Noktalı kontur.

Çizgili kontur.

Düz çizgili kontur.

Çift çizgili kontur.

3D Çökük yuvarlak kontur. Bu etki outline-color değeri ile ilgilidir.

3D Çıkıntılı yuvarlak kontur. Bu etki outline-color değeri ile ilgilidir.

3D Çökük kontur. Bu etki outline-color değeri ile ilgilidir.

3D Çıkıntılı kontur. Bu etki outline-color değeri ile ilgilidir.

Kişisel olarak deneyin

Dikkat:Aksi takdirde outline-style Özellik belirtilmemişse, diğer kontur özellikleri (önümüzdeki bölümde ayrıntılı olarak açıklanacaktır) hiçbir etkisi olmayacaktır!