Kenarlıklar

CSS Podcast'i - 016: Sınırlar 'nı inceleyin.

box modeli modülünde, kutu modelinin her bir bölümünü tanımlamak için bir çerçeve analojisi kullanmayı düşündük.

Kenarlık kutusu, kutularınızın çerçevesidir border özellikleri de bu çerçeveyi doğru şekilde oluşturmanız için size çok sayıda seçenek sunar. aklınıza gelebilecek hemen hemen her tarzı konuştuk.

Kenarlık özellikleri

Tek tek border özellikleri, sınırın çeşitli bölümlerinin stilini belirlemek için bir yol sağlar.

Stil

Bir kenarlığın görünmesi için yapmanız gereken border-style. 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ış tarayıcılar arasında farklılık gösterebilir, özellikle black gibi koyu renkler için. Chrome'da bu kenarlık stilleri düz görünür ve Firefox'ta daha koyu bir ikinci renk elde etmek için daha aydınlanırlar.

Tarayıcı davranışı diğer kenarlık stillerinde de değişiklik gösterebilir. Dolayısıyla, sitenizi farklı tarayıcılarda test etmeniz önemlidir. Bu farka ilişkin yaygın bir örnek, her bir tarayıcının dotted ve dashed stillerini oluşturma şeklidir.

Kutunuzun her iki kenarının kenarlık stilini ayarlamak için: dönüşüm hunisinin üst kısmındaki border-top-style border-right-style, border-left-style, ve border-bottom-style.

Steno

margin ve padding olduğu gibi, URL adresini border kestirme ö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.

Renk

Kutunun tüm yanlarının veya her bir tarafının renklerini ayarlayabilirsiniz. border-color. Varsayılan olarak kutunun geçerli metin rengi kullanılır: currentColor. Bu, yalnızca sınır özelliklerini belirtirseniz ve örneğin genişliği, renk, açıkça ayarlamadığınız sürece hesaplanan değer olur.

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

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

Kutunuzun her iki tarafına bir kenarlık rengi ayarlamak için: kullan border-top-color border-right-color, border-left-color ve border-bottom-color

Genişlik

Kenarlığın genişliği, çizginin ne kadar kalın olduğunu belirler ve border-width. Varsayılan kenarlık genişliği: medium. Yine de bir stil tanımlamadığınız sürece bu reklam görünmez. thin ve thick gibi diğer adlandırılmış genişlikleri kullanabilirsiniz.

border-width özellikleri ayrıca şunun gibi bir uzunluk birimini kabul eder: px, em, rem veya %. Kutunuzun her bir tarafındaki kenarlık genişliğini ayarlamak için border-top-width border-right-width, border-left-width ve border-bottom-width

Mantıksal özellikler

Mantıksal Özellikler modülünde, blok akışı ve satır içi akıştan nasıl bahsedileceğini keşfettiniz. dikkat edin.

Sınırlama özelliğinden de yararlanabilirsiniz:

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

Bu örnekte, .my-element tüm tarafları 2px, noktalı kenarlık. Ardından inline-end kenarlığı, düz ve kırmızı renkli 2px olarak tanımlanır. Yani İngilizce gibi soldan sağa yazılan dillerde kırmızı kenarlık kutunun sağ tarafında olacaktır. Sağdan sola yazılan dillerde (ör. Arapça) kırmızı kenarlık kutunun sol tarafında olacaktır.

Sınırlardaki mantıksal özellikler için tarayıcı desteği, Bu nedenle, kullanmadan önce mutlaka desteği kontrol edin.

Kenarlık yarıçapı

Kutuya yuvarlatılmış köşeler vermek için border-radius mülkündeki her mülk.

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

Bu kısaltma, kutunuzun her bir 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

Her köşenin yarıçapını da şu sırayı takip eder: 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 başka bir steno kullanıyorsunuz çünkü kenarlık yarıçapı ikiye bölünüyor: yatay ve dikey eksenlerde yer alır. Bu, border-top-left-radius: 1em özelliğini ayarladığınızda, sol üst-üst yarıçapı ve sol üst-sol yarıçapını ayarlıyorsunuz.

Her iki özelliği de köşe başına şu şekilde tanımlayabilirsiniz:

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

Bu, border-top-left-top olarak 1em değerini ekler. ve 2em olan border-top-left-left değeri. Bu, sol üst kenarlık yarıçapını eliptik yarıçapa dönüştürür. kullanın.

Bu değerleri border-radius kısaltmasıyla tanımlayabilirsiniz. standart değerlerden sonra eliptik değerleri tanımlamak için / kullanarak. Bu, yaratıcılığınızı ve 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 resimleri

CSS'de fırçaya dayalı bir kenarlık kullanmanız gerekmez. Ayrıca, border-image. Bu kısaltma özelliği, kaynak resmi ayarlamanıza, nasıl dilimlendiğini, resim genişliğini ve kenarlığın kenardan ne kadar uzak olduğunu ve nasıl tekrarlanması gerektiğini görebilirsiniz.

.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 mülkü border-width gibidir: kenarlık resminizin genişliğini de bu şekilde ayarlayabilirsiniz. border-image-outset özelliği, kenarlık resminiz ile içinde bulunduğu kutu arasındaki mesafeyi ayarlayabilmenizi sağlar.

border-image-source

border-image-source (kenarlık resminin kaynağı), CSS gradyanları içeren geçerli herhangi bir resim için bir 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 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 kısaltması gibi çalışır.

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

Ofset değerleri tanımlanmışken, artık resmin 4 köşesi, 4 kenar ve orta bölümü olmak üzere 9 bölümü var. Köşeler, kenarlık resmi olan öğenin köşelerine uygulanır. Kenarlar, söz konusu öğenin kenarlarına uygulanır. border-image-repeat özelliği, bu kenarların boşluğu nasıl doldurduğunu ve border-image-width özelliği, dilimlerin boyutunu kontrol eder.

Son olarak, fill anahtar kelimesi, dilimlemenin solundaki orta bölümün öğenin arka plan resmi olarak kullanılıp kullanılmayacağını belirler.

border-image-repeat

border-image-repeat kenarlık resminizin nasıl tekrarlanmasını istediğinizi CSS'ye nasıl bildireceğinizdir. background-repeat ile aynı şekilde çalışır.

• Başlangıç değeri stretch, Bu resim, kaynak resmi mümkün olduğunda mevcut alanı dolduracak şekilde uzatır.
• repeat değeri, kaynak resmin kenarlarını mümkün olduğunca fazla döşer. ve bunu elde etmek için kenar bölgelerini kırpabilir.
• round değeri, tekrarla aynıdır. ancak resmin kenar bölgelerini mümkün olduğunca çok alana sığacak şekilde kırpmak yerine resmi uzatır ve aynı zamanda kesintisiz tekrarlar için tekrar
• space değeri, tekrarla aynıdır. ancak bu değer, kesintisiz bir desen oluşturmak için her bir kenar bölgesi arasına boşluk ekler.

Öğrendiklerinizi sınayın

Sınırlarla ilgili bilginizi test edin

.my-element {
  border: solid hotpink;
}