Css Outline Özelliği
Html elemanlarına border ile uyguladığımız kenarlıktan başka ikinci bir kenarlık daha uygulamak istersek Outline özelliğini kullanabiliriz.
Outline özelliği ile çizgilerin stil, renk ve kalınlığı belirlenir. Outline-offset özelliği ile de dış çizgi ile border arasındaki uzaklık belirlenir.
outline: 1px solid blue;
outline-offset: 20px;
Outline ile oluşturulan çizgiler yer kaplamaz. Bunu şöyle açıklayalım: Html elemanının kapladığı yer hesaplanırken width, margin, padding ve border özellikleri toplanmaktadır. Outline özelliği bu hesaba katılmaz yani elemanın kapladığı yeri etkilemez.
Buna bağlı olarak Outline çizgisi uygulandığı etiketin etrafındaki elemanların üzerine binebilir.
Konu Örneklerinde alt alta yer alan iki div elemanına da outline özelliği uygulanmış, divler birbirine yakın olduğu için outline çizgileri diğerlerinin üstüne binmiştir. Çizgiler üst üste binmesin istersek margin değerini artırabilir, bu sayede kutuları ö uzaklaştırabiliriz.
Örneğin çalışan halini Konu Örnekleri kısmında bulabilirsiniz.
css ile dış kenarlık oluşturma, css ile html elemanlarına ikinci bir kenarlık uygulama, outline özelliği ne işe yarar, kenarlıktan başka bir kenarlık daha uygulama
KONU İLE İLGİLİ ÖRNEKLER
Örnekte border siyah, outline ise kırmızı belirlenmiştir. Margin, padding, outline-offset değerlerini değiştirerek sonuçları inceleyiniz.
7577 kez okundu.