CSS3 ile gelen yeniliklerden biri de outline-offset özelliği.. Outline ile oluşturulan çerçeve, outline-offset özelliğine verdiğimiz değer ile merkezden uzaklaşıyor veya merkeze yaklaşıyor. (Değer, negatif olursa merkeze yaklaşıyor, pozitif olursa merkezden uzaklaşıyor.)

Bu özellik Opera, Firefox, Safari gibi tarayıcılarda çalışıyor. Şimdi bir örnek yaparak konuyu daha iyi anlamaya çalışalım.

HTML yapı

<div id="outline">
 <p>Burada outline ile mavi çerçeveyi oluşturup, outline-offset özelliği ile de bu çerçeveyi dışa doğru orantılı bir şekilde genişlettik.</p>
 </div>

CSS Stil Yapısı

#outline {
 width: 150px;
 height: 150px;
 margin:30px;
 text-align:center;
 border: 1px solid black;
 outline: 1px solid blue;/*burada ikinci çerçeveyi oluşturduk*/
 outline-offset: 10px;/*bununla da dışa doğru 10 piksel genişlettik*/
 }

Yukarıdaki resimden de görüleceği üzere, normal çizginin (border) dışında mavi bir çizgi oluşturduk. Bunu outline-offset özelliğine verdiğimiz 10 piksellik değer ile yaptık. Bu değeri negatif olarakta verebiliriz, ozaman da mavi çizgi, normal siyah çerçevenin içerisinde gözükecektir. Resmin uygulamasını buradan görebilirsiniz (yukarıda bahsettiğim tarayıcılarda görünür, diğerlerinde bu şekilde görünmez.).

Kaynak dosyayı buradan indirebilirsiniz. Teşekkürler..