Css

CSS Kenarlıklar – CSS Anahat (Outline)

CSS Kenarlıklar – CSS Anahat (Outline)

Border’ın dışına stil vermek için outline özelliğini kullanacağız, yani border ın dışında ikinci bir border’ımız olacak. outline özelliği ile stil, renk ve genişlik belirleyebiliriz.

Outline Vs Border

Outline genellikle elemanları vurgulamak için kullanılır. Bir bakışta outline , sınıra çok benziyor, ancak sınırdan aşağıdaki şekillerde farklılık gösteriyor:

  • Outline yer kaplamaz, çünkü her zaman sayfadaki diğer öğeleri üst üste getirmelerine neden olabilecek öğenin kutusunun üstüne yerleştirilirler.
  • Border aksine, outline her kenarı farklı bir genişliğe ayarlamamıza veya her kenar için farklı renkler ve stiller belirlememize izin vermez. Bir taslak her tarafta aynıdır.
  • Outline , üst üste binme dışında çevre elemanlar üzerinde herhangi bir etkisi yoktur.
  • Border aksine, outline öğenin boyutunu veya konumunu değiştirmez.
  • Outline dikdörtgen olmayabilir.

Outline Kenarlık Boyut Özelliği (outline-width)

CSS uzunluğu ( pxptem ) olarak dış kenarlık boyutunu belirtmemizi sağlar. , ancak yüzde veya negatif değerler izin verilmez. border-widthgibi .

Outline Kenarlık Stili (outline-style)

Dış kenarlığı bu özellik sayesinde aşağıdaki değerlerden birini alabilir nonehiddendasheddotteddoublegrooveinsetoutsetridgeve solid. Tıpkı border-style gibi .

CSS Border

CSS Dış Kenarlık

Outline Kenarlık Rengi (outline-color)

Kenarlığın rengini ayarlamak için kullanılır. Ayrıcaoutline-coloriçin transparent ayarlayabilirsiniz.

Not:outline-color Tek başına kullanılırsa, mülkiyet çalışmaz. Önce ayarlamak için outline-style özelliği kullanın .

Örnek kullanımı görelim.

Dış Kenarlığın Kısa Kullanımı (outline )

Yukarıda sayılan tüm özellikleri tek bir outline koduyla belirtebilisiniz.

Uyarı: Internet Explorer 7 ve önceki sürümleri bu outlineözelliği desteklemiyor . IE8 outlineözelliği yalnızca bir <!DOCTYPE>belirtilmişse destekler.

 

Yazar Hakkında

Beytullah Toprak

Genç girişimci olarak web sitemde siz değerli okuyucularımıza elimden geldiğince bilgi aktarmak hem öğrenmek , hem sizlere öğretmek amaçlamaktayız.

Yorum Yap