CSS Podcast'i - 016: Kenarlıklar
Kutu modeli modülünde, kutu modelinin her bölümünü açıklamak için bir çerçeve analojisi kullandık.
Kenarlık kutusu, kutularınızın çerçevesidir. border
mülkleri, bu çerçeveyi aklınıza gelebilecek hemen hemen her tarzda oluşturmanız için çok çeşitli seçenekler sunar.
Kenarlık özellikleri
Ayrı border
mülkleri, kenarlığın çeşitli bölümlerine stil uygulamanın bir yolunu sağlar.
Stil
Kenarlık görünmesi için border-style
değerini tanımlamanız gerekir.
Birkaç seçenekten birini tercih edebilirsiniz:
ridge
, inset
, outset
ve groove
stilleri kullanıldığında tarayıcı, kontrast ve derinlik sağlamak için gösterilen ikinci rengin kenarlık rengini koyulaştırır.
Bu davranış, özellikle black
gibi koyu renkler söz konusu olduğunda tarayıcılar arasında değişiklik gösterebilir.
Chrome'da bu kenar stillerinin rengi düz görünür. Firefox'ta ise daha koyu bir ikinci renk sağlamak için rengi açılır.
Tarayıcı davranışı diğer kenar stillerinde de değişiklik gösterebilir. Bu nedenle, sitenizi farklı tarayıcılarda test etmeniz önemlidir.
Bu farkın yaygın bir örneği, her tarayıcının dotted
ve dashed
stillerini nasıl oluşturmasıdır.
Kutunuzun her bir tarafında kenarlık stilini ayarlamak için border-top-style
, border-right-style
, border-left-style
ve border-bottom-style
öğelerini kullanabilirsiniz.
Steno
margin
ve padding
'te olduğu gibi, kenarlığınızın tüm bölümlerini tek bir beyanla tanımlamak için border
kısayol özelliğini kullanabilirsiniz.
.my-element {
border: 1px solid red;
}
border
kısalığındaki değerlerin sırası border-width
, border-style
ve border-color
şeklindedir.
Renk
border-color
simgesini kullanarak kutunuzun tüm taraflarının veya her bir tarafının rengini ayarlayabilirsiniz.
Varsayılan olarak kutunun mevcut metin rengi kullanılır: currentColor
.
Bu, yalnızca genişlik gibi çerçeve özelliklerini belirtirseniz açıkça ayarlamadığınız sürece rengin hesaplanan değer olacağı anlamına gelir.
.my-element {
color: blue;
border: solid; /* Will be a blue border */
}
.my-element {
color: blue;
border: solid yellow;
}
Kutunuzun her iki tarafına da kenar rengi ayarlamak için border-top-color
, border-right-color
, border-left-color
ve border-bottom-color
karakterlerini kullanın.
Genişlik
Kenarlık genişliği, çizginin kalınlığını ifade eder ve border-width
ile kontrol edilir.
Varsayılan kenarlık genişliği medium
'tir.
Ancak bir stil tanımlamadığınız sürece bu bilgi görünmez.
thin
ve thick
gibi diğer adlandırılmış genişlikleri kullanabilirsiniz.
border-width
mülkleri, px
, em
, rem
veya %
gibi bir uzunluk birimini de kabul eder.
Kutunuzun her iki tarafındaki kenarlık genişliğini ayarlamak için border-top-width
, border-right-width
, border-left-width
ve border-bottom-width
karakterlerini kullanın.
Mantıksal özellikler
Mantıksal Özellikler modülünde, açıkça üst, sağ, alt veya sol taraflar yerine blok akışı ve satır içi akışa nasıl atıfta bulunacağınızı öğrendiniz.
Kenarlıklarda da bu özelliği kullanabilirsiniz:
.my-element {
border: 2px dotted;
border-inline-end: 2px solid red;
}
Bu örnekte, .my-element
öğesinin tüm kenarlarının mevcut metin renginde 2px
noktalı bir kenarlığa sahip olduğu tanımlanmıştır.
inline-end
kenarı daha sonra 2px
olarak tanımlanır, düz ve kırmızıdır.
Yani soldan sağa okunan dillerde (ör. İngilizce) kırmızı kenar, kutunun sağ tarafında olur.
Arapça gibi sağdan sola okunan dillerde kırmızı kenar, kutunun sol tarafında olur.
Kenarlıklardaki mantıksal mülkler için tarayıcı desteği değişiklik gösterir. Bu nedenle, kullanmadan önce destek bilgilerini kontrol edin.
Kenarlık yarıçapı
Bir kutuya yuvarlatılmış köşeler vermek için border-radius
özelliğini kullanın.
.my-element {
border-radius: 1em;
}
Bu kısaltma, kutunuzun her köşesine tutarlı bir kenar ekler.
Diğer kenar özellikleri gibi, her bir kenar için kenar yarıçapını border-top-left-radius
, border-top-right-radius
, border-bottom-right-radius
ve border-bottom-left-radius
ile tanımlayabilirsiniz.
Her köşenin yarıçapını kısaltma olarak da belirtebilirsiniz. Bu kısaltma şu sırayla yazılır: sol üst, sağ üst, sağ alt ve sol alt.
.my-element {
border-radius: 1em 2em 3em 4em;
}
Kenarlık yarıçapı dikey ve yatay kenar olmak üzere iki bölüme ayrıldığından, bir köşe için tek bir değer tanımlayarak başka bir kısayol kullanıyorsunuzdur.
Bu, border-top-left-radius: 1em
değerini ayarlarken sol üstten üst yarıçapını ve sol üstten sol yarıçapını ayarladığınız anlamına gelir.
Her iki özelliği de köşe başına aşağıdaki gibi tanımlayabilirsiniz:
.my-element {
border-top-left-radius: 1em 2em;
}
Bu işlem, 1em
değerine sahip bir border-top-left-top
ve 2em
değerine sahip bir border-top-left-left
değeri ekler.
Bu işlem, sol üst kenarlığın yarıçapını varsayılan dairesel yarıçap yerine eliptik yarıçapa dönüştürür.
Bu değerleri, standart değerlerden sonra eliptik değerleri tanımlamak için /
kullanarak border-radius
kısalığında tanımlayabilirsiniz.
Bu sayede yaratıcılığınızı konuşturabilir ve karmaşık şekiller oluşturabilirsiniz.
.my-element {
border: 2px solid;
border-radius: 95px 155px 148px 103px / 48px 95px 130px 203px;
}
Kenarlık resimleri
CSS'de yalnızca çizgi tabanlı bir kenar kullanmanız gerekmez.
border-image
kullanarak her tür resmi de kullanabilirsiniz.
Bu kısayol mülkü, kaynak resmi, bu resmin nasıl dilimlendiğini, resim genişliğini, kenarlığın kenardan ne kadar uzakta olduğunu ve nasıl tekrarlanacağını ayarlamanıza olanak tanır.
.my-element {
border-image-source: url(https://assets.codepen.io/174183/border-image-frame.jpg);
border-image-slice: 61 58 51 48;
border-image-width: 20px 20px 20px 20px;
border-image-outset: 0px 0px 0px 0px;
border-image-repeat: stretch stretch;
}
border-image-width
özelliği, border-width
gibidir:
kenarlık resminizin genişliğini bu şekilde ayarlarsınız.
border-image-outset
özelliği, kenarlık resminiz ile etrafını sardığı kutu arasındaki mesafeyi ayarlamanıza olanak tanır.
border-image-source
border-image-source
(kenarlık resminin kaynağı), CSS degradeleri dahil olmak üzere geçerli herhangi bir resim için url
olabilir.
.my-element {
border-image-source: url('path/to/image.png');
}
.my-element {
border-image-source: linear-gradient(to bottom, #000, #fff);
}
border-image-slice
border-image-slice
özelliği, bir resmi 4 bölme çizgisinden oluşan 9 parçaya bölmenize olanak tanıyan kullanışlı bir özelliktir.
Üst, sağ, alt ve sol ofset değerini tanımladığınız margin
kısayolu gibi çalışır.
.my-element {
border-image: url('image.jpg');
border-image-slice: 61 58 51 48;
}
Göreli konum değerleri tanımlandığında, resmin 9 bölümü olur: 4 köşe, 4 kenar ve bir orta bölüm.
Köşeler, kenar resmiyle birlikte öğenin köşelerine uygulanır.
Kenarlar, ilgili öğenin kenarlarına uygulanır.
border-image-repeat
özelliği, bu kenarların alanlarını nasıl doldurduğunu tanımlar ve border-image-width
özelliği, dilimlerin boyutunu kontrol eder.
Son olarak fill
anahtar kelimesi, dilimleme işleminin bıraktığı orta bölümün öğenin arka plan resmi olarak kullanılıp kullanılmayacağını belirler.
border-image-repeat
border-image-repeat
, CSS'ye kenarlık resminizin nasıl tekrarlanmasını istediğinizi bildirmek için kullanılır.
background-repeat
ile aynı şekilde çalışır.
- İlk değer
stretch
'tür. Bu değer, mümkün olduğunda mevcut alanı doldurmak için kaynak resmi uzatır. repeat
değeri, kaynak görüntünün kenarlarını mümkün olduğunca çok sayıda karoya böler ve bunu yapmak için kenar bölgelerini kırpabilir.round
değeri, tekrar değeriyle aynıdır ancak resim kenar bölgelerini mümkün olduğunca çok sığacak şekilde kırpmak yerine, resimleri uzatma ve tekrarlayarak sorunsuz bir tekrar elde eder.space
değeri yine tekrarla aynıdır ancak bu değer, kesintisiz bir desen oluşturmak için her kenar bölgesi arasına boşluk ekler.
Öğrendiklerinizi test etme
Sınırlarla ilgili bilginizi test edin
Varsayılan kenarlık rengi nedir?
black
currentColor
white
historicColor
.my-element { border: solid hotpink; }
Bir kenarlığın varsayılan genişliği nedir?
solid
1px
medium
border-inline: 1px solid
şunu yapar: