Kenarlıklar

CSS Podcast - 016: Sınırlar

kutu modeli modülünde, kutu modelinin her bir bölümünü açıklayan bir çerçeve analojisi düşündük.

Kenarlık kutusu, kutularınızın çerçevesidir ve border özellikleri, bu çerçeveyi aklınıza gelen hemen her stilde oluşturmak için size çok çeşitli seçenekler sunar.

Kenarlık özellikleri

Bağımsız border özellikleri, bir kenarlığın çeşitli bölümlerine stil eklemek için bir yol sağlar.

Stil

Bir kenarlığın görünmesi için border-style öğesini tanımlamanız gerekir. Aralarından seçim yapabileceğiniz birkaç seçenek vardır:

ridge, inset, outset ve groove stillerini kullanırken tarayıcı, kontrast ve derinlik sağlamak amacıyla, gösterilen ikinci renk için kenarlık rengini koyulaştırır. Bu davranış, özellikle black gibi koyu renkler için tarayıcılar arasında farklılık gösterebilir. Chrome'da bu kenarlık stilleri düz görünür ve Firefox'ta daha koyu bir ikinci renk sağlamak için açıklanır.

Tarayıcı davranışı diğer kenarlık stilleri için 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 bir tarayıcının dotted ve dashed stillerini oluşturma şeklidir.

Kutunuzun her iki yanında kenarlık stili ayarlamak için border-top-style, border-right-style, border-left-style ve border-bottom-style seçeneklerini kullanabilirsiniz.

Steno

margin ve padding gibi, kenarlığınızın tüm bölümlerini tek bir beyanda tanımlamak için border kısayol özelliğini kullanabilirsiniz.

.my-element {
    border: 1px solid red;
}

border kısaltmasındaki değerlerin sırası border-width, border-style ve ardından border-color şeklindedir.

Renk

border-color ile kutunuzun tüm kenarlarını veya her bir tarafını renklendirebilirsiniz. Varsayılan olarak kutunun mevcut metin rengi kullanılır: currentColor. Yani genişlik gibi yalnızca kenarlık özelliklerini bildirirseniz rengi açıkça ayarlamadığınız sürece hesaplanan bu değer olur.

.my-element {
    color: blue;
    border: solid; /* Will be a blue border */
}

.my-element {
    color: blue;
    border: solid yellow;
}

Kutunuzun her iki yanında kenarlık rengi ayarlamak için border-top-color, border-right-color, border-left-color ve border-bottom-color boyutlarını kullanın.

Genişlik

Kenarlığın genişliği, çizginin ne kadar kalın olduğunu belirtir ve border-width tarafından kontrol edilir. Varsayılan kenarlık genişliği medium'tır. Ancak bir stil tanımlamadığınız sürece bu simge görünmez. thin ve thick gibi diğer adlandırılmış genişlikleri kullanabilirsiniz.

border-width mülkleri px, em, rem veya % gibi uzunluk birimlerini de kabul eder. Kutunuzun her iki tarafında kenarlık genişliğini ayarlamak için border-top-width, border-right-width, border-left-width ve border-bottom-width işaretlerini kullanın.

Mantıksal özellikler

Mantıksal Özellikler modülünde, üst, sağ, alt veya sol açıkça görünenler yerine akışın ve satır içi akışın nasıl engelleneceğini öğrendiniz.

Kenarlıklar için de bu özelliği kullanabilirsiniz:

.my-element {
    border: 2px dotted;
    border-inline-end: 2px solid red;
}

Bu örnekte .my-element öğesinin tüm kenarları, geçerli metin rengi olan 2px ve noktalı bir kenarlığa sahiptir. Daha sonra inline-end kenarlığı, kesintisiz ve kırmızı olmak üzere 2px şeklinde tanımlanır. Bu, İngilizce gibi soldan sağa yazılan dillerde kırmızı kenarlığın kutunun sağ tarafında olacağı anlamına gelir. Sağdan sola olan dillerde (ör. Arapça), kırmızı kenarlık kutunun sol tarafındadır.

Kenarlıklardaki mantıksal özellikler için tarayıcı desteği çeşitlilik gösterir, bu nedenle kullanmadan önce desteği kontrol ettiğinizden emin olun.

Kenarlık yarıçapı

Köşeleri yuvarlanmış bir kutu göstermek için border-radius özelliğini kullanın.

.my-element {
    border-radius: 1em;
}

Bu stenografi, kutunuzun her köşesine tutarlı bir kenarlık ekler. Diğer kenarlık özelliklerinde olduğu gibi, her bir kenarın kenarlık yarıçapını border-top-left-radius, border-top-right-radius, border-bottom-right-radius ve border-bottom-left-radius değerleriyle tanımlayabilirsiniz.

Kısayolda her köşenin yarıçapını da şu sırayla belirleyebilirsiniz: sol üst, sağ üst, sağ alt sonra sol alt.

.my-element {
    border-radius: 1em 2em 3em 4em;
}

Bir köşe için tek bir değer tanımlayarak, kenarlık yarıçapı iki parçaya ayrıldığı için başka bir kısaltma kullanmış olursunuz: dikey ve yatay kenarlar. Diğer bir deyişle, border-top-left-radius: 1em özelliğini ayarladığınızda sol üst-üst yarıçapı ve sol üst-sol yarıçapı ayarlamış olursunuz.

Her iki özelliği de aşağıdaki gibi her köşe için tanımlayabilirsiniz:

.my-element {
    border-top-left-radius: 1em 2em;
}

Bu işlem, border-top-left-top değerini 1em ve border-top-left-left değerini 2em ekler. Bu işlem, sol üst kenarlık yarıçapını, varsayılan dairesel yarıçap yerine eliptik bir yarıçapa dönüştürür.

Bu değerleri, standart değerlerden sonra eliptik değerleri tanımlamak için / kullanarak border-radius bölümünde tanımlayabilirsiniz. Bu, yaratıcı olmanızı ve bazı karmaşık şekiller oluşturmanızı sağlar.

.my-element {
    border: 2px solid;
  border-radius: 95px 155px 148px 103px / 48px 95px 130px 203px;
}

Kenarlık resimler

CSS'de çizgiye dayalı bir kenarlık kullanmanız gerekmez. Ayrıca, border-image kullanarak tüm resim türlerini de kullanabilirsiniz. Bu steno özelliği, kaynak resmi, resmin nasıl bölüneceğini, resim genişliğini, kenarlığın kenardan ne kadar uzakta olacağını 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ından sarıldığı kutu arasındaki mesafeyi ayarlamanıza olanak tanır.

border-image-source

border-image-source (kenarlık resminin kaynağı), CSS renk geçişlerini içeren herhangi bir geçerli 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ölünmüş satırdan oluşan 9 bölüme ayırmanızı sağlayan kullanışlı bir özelliktir. Üst, sağ, alt ve sol ofset değerini tanımladığınız margin stenosu gibi çalışır.

.my-element {
    border-image: url('image.jpg');
    border-image-slice: 61 58 51 48;
}

Ofset değerleri tanımlandığında, artık resmin 4 köşe, 4 kenar ve bir orta bölüm olmak üzere 9 bölümü olur. Köşeler, kenarlık resminin bulunduğu öğenin köşelerine uygulanır. Kenarlar, söz konusu öğenin kenarlarına uygulanır. border-image-repeat özelliği bu kenarların alanı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 bildirir. background-repeat ile aynı şekilde çalışır.

• Başlangıç değeri stretch olur. Bu değer, mümkün olduğunda kaynak resmi mevcut alanı dolduracak şekilde genişletir.
• repeat değeri, kaynak resmin kenarlarını mümkün olduğunca çok kez böler ve bunu sağlamak için kenar bölgelerini kırpabilir.
• round değeri tekrar ile aynıdır ancak resim kenarı bölgelerini mümkün olduğunca fazla sığması için kırpmak yerine, resmi uzatır ve kesintisiz bir tekrarlama elde etmek için tekrar eder.
• space değeri tekrar tekrar ile aynıdır ancak bu değer, kesintisiz bir kalıp oluşturmak için her bir kenar bölgesinin arasına boşluk ekler.

Öğrendiklerinizi sınayın

Sınırlarla ilgili bilginizi test edin

.my-element {
  border: solid hotpink;
}