Öğe Kenarlıkları Eklemek için 3 CSS Yöntemi

CSS söz konusu olduğunda, bazen bir border gerçekten bir değil border.

Bu bölümde, aşağıdakiler arasındaki farkları ele alacağız:

• border
• outline
• box-shadow

Birini diğerinin yerine ne zaman kullanabileceğinizi de tartışacağız.

Üç sınır yöntemimiz arasındaki temel fark, nerede bir eleman üzerine yerleştirilirler ve nasıl boyutlarını etkilerler. Bu davranış, CSS kutu modeli tarafından kontrol edilir.

• en border tam olarak öğenin sınırıdır, dolgusu ile kenar boşluğu arasında bulunur ve genişliği hesaplanan öğe boyutlarını etkiler
• en outline yanında ama dışında borderhem örtüşen box-shadow ve marginancak öğenin boyutlarını etkilemez
• varsayılan olarak, box-shadow tanımlanan yön(ler)deki boşluk miktarını kaplayan sınırın kenarından dışarı uzanır ve elemanın boyutlarını da etkilemez

Kenarlıklar, web’in başlangıcından beri tasarımda bir standart olmuştur.

Ele alacağımız diğer iki yöntemle karşılaştırıldığında önemli bir fark, varsayılan olarak sınırlar, bir öğenin hesaplanan boyutlarına dahil edilir. ayarlasan bile box-sizing: border-box sınırlar hala hesaplamada yer alıyor.

Bir kenarlığın en temel sözdizimi onun genişliğini ve stilini tanımlar:

border: 3px solid;

Tanımlanmadıysa, varsayılan renk currentColor bu, en yakın tanımı kullanacağı anlamına gelir color çağlayanda.

Ancak kenarlık ve kullanım için daha fazla stil var border-style Dilerseniz her iki taraf için farklı bir stil tanımlayabilirsiniz.

Ziyaret etmek MDN belgeleri mevcut tüm gözden geçirmek için border-style değerler ve örneklere bakın.

Kenarlık, stilin öğenin boyutlarında hesaplanmasının kabul edilebilir olduğu durumlar için sağlam bir seçimdir (punto amaçlı). Ve varsayılan stiller çok fazla tasarım esnekliği sağlar.

için okumaya devam edin bonus ipucu sadece bir şey hakkında border yapabilir!

Anahatlar için, onu görünür kılmak için gereken tek özellik, varsayılan değer olduğundan bir stil sağlamaktır. none:

outline: solid;

Bordür gibi, üzerinden renk kazanacaktır. currentColor ve varsayılan genişlik medium.

Tipik uygulama outline yerel tarayıcı stillerine göre :focus bağlantılar ve düğmeler gibi etkileşimli öğelerden oluşur.

Bu özel uygulama gerçekleşmesine izin verilmeli özel bir veri sağlayamadığınız sürece erişilebilirlik amacıyla :focus karşılayan stil WCAG Başarı Kriteri 2.4.7 Odak Görünür.

Tasarım amaçları için, sıklıkla belirtilen bir sorun outline eğriyi herhangi birinden miras alamamasıdır. border-radius stiller.

Kullanımı outline öğenin boyutlarını etkilemek istemediğinizde ve bir border-radius. kullanmak olur kenarlıkla aynı stil değerleri Böylece benzer bir görünüm elde edebilirsiniz.

için gereken minimum özellikler box shadow için değerlerdir x ve y eksen ve bir renk:

box-shadow: 5px 8px black;

İsteğe bağlı olarak, oluşturmak için üçüncü bir birim ekleyin blurve eklemek için dördüncü spread.

Ödeme yumurta kafasıyla ilgili 4.5 dakikalık video demom genişletilmiş sözdizimi hakkında daha fazla bilgi edinmek ve kullanımla ilgili ipuçları için box-shadow.

Bir sınır oluşturmak için kullanmak için x ve y eksen değerlerinin yanı sıra blur ile 0. Sonra için pozitif bir sayı ayarlayın spread:

box-shadow: 0 0 0 3px blue;

Bu, öğenin etrafında bir kenarlık görünümü yaratacaktır. ve uygulanan bir uygulamayı bile takip edebilir border-radius:

tercih edebilirsin box-shadow özellikle düzen kaymasına neden olmadan bir kenarlığı canlandırmak istediğinizde. Bir sonraki bölümde bu bağlamın bir örneği gösterilecektir.

Dan beri box-shadow katmanlı olabilir, mizanpajlarınızı geliştirmek için tanımak için çok yönlü iyi bir araçtır.

Ancak, tarafından sağlanan bazı stilleri tam olarak taklit edemeyecek. border ve outline.

Burada, kullanmanız gerekebilecek birkaç pratik senaryo border alternatif.

Gerçek bir ortak durum border Hem kenarlıklı hem de kenarlıksız düğmeler için stiller sağlarken ve bunların senaryosu yan yana sıralanırken sorun haline geliyor.

Tipik bir çözüm, genellikle kenarlıksız düğme boyutlarını border-width.

Yeni bilgimizle alternatif bir çözüm kullanmaktır. box-shadow ile birlikte inset sözde sınırı görsel olarak yerleştirmek için anahtar kelime içeri düğme:

Dolgunuzun boyutundan daha büyük olması gerektiğini unutmayın. border-width metin içeriğinin çakışmasını önlemek için.

Alternatif olarak, belki de Ekle bir sınır :hover veya :focus. gerçek kullanarak borderolduğundan, düzen değişikliğinden istenmeyen bir görsel atlama yaşayacaksınız. border kısaca o hallerdeki boyutları artıracaktır.

Bu durumda kullanabiliriz box-shadow gerçek boyutların artmaması için sözde kenarlığı oluşturmak için – artı kullanarak onu canlandırabiliriz transition:

İşte yukarıdaki örnek için azaltılmış kod:

button {
transition: box-shadow 180ms ease-in;
}
button:hover {
box-shadow: 0 0 0 3px tomato;
}

Klasik bir CSS şakası, özellikle taşma kaydırma veya konumlandırma için CSS sorunlarını çözmek için şunu eklemektir:

* {
border: 1px solid red;
}

Bu, her öğeye kırmızı bir kenarlık ekleyecektir.

Ancak öğrendiğimiz gibi, bu aynı zamanda hesaplanan boyutlarını da etkileyecek, dolayısıyla potansiyel olarak yanlışlıkla size ek sorunlara neden olur.

Bunun yerine şunu kullanın:

* {
outline: 1px solid red;
}

Sürpriz sınav: nerede olacak outline yerleştirilebilir ve bu neden daha iyi bir çözüm?

kullanmanın olası bir sonucu border dır-dir ekleme içerik yeniden çizildiğinde kaydırma çubukları. kullanırken bu yan etki olmayacaktır. outline.

Ek olarak, muhtemelen kullanıyor olabilirsiniz border elementler için zaten, evrensel olarak değişen border kesinlikle yeni problemler ortaya çıkarması muhtemel olan düzen kaymalarına neden olacaktır.

Kenar notu: Tarayıcı Geliştirme Araçları ayrıca öğeleri tanımlamanıza yardımcı olacak daha karmaşık yöntemler geliştirmiştir. Firefox taşma için hata ayıklama durumunda yardımcı olan hem “kaydırma” hem de “taşma” etiketi eklemek bile. DevTool özellikleri hakkında daha fazla bilgi edinmek için biraz zaman ayırmanızı tavsiye ederim!

Erişilebilirlik için, farkında olmayabileceğiniz bir senaryo, Windows Yüksek Karşıtlık Modu (WHCM) kullanıcılarıdır.

Bu modda, sağladığınız renkler azaltılmış yüksek kontrast paletine dönüştürülür. Dahil olmak üzere tüm CSS özelliklerine izin verilmez. box-shadow.

Pratik bir etki, outline üzerine :focus ve onunla değiştirdi box-shadowWHCM kullanıcılarına artık görünür odak verilmeyecek.

Bu olumsuz etkiyi ortadan kaldırmak için bir transparent ana hatlarıyla :focus:

button:focus {
outline: 2px solid transparent;
}

Bu özel konu hakkında biraz daha fazla bağlam için, gözden geçirin düğme stiliyle ilgili bölüm.

Çünkü outline ve box-shadow oturmak dışarıda kutu modelindeki sınırın bir sonucu olarak, karşılaşabileceğiniz bir sonuç, bunların görünümün kenarlarının altında kaybolmalarıdır. Yani, eklemeniz gerekebilir margin elemana veya padding için body görünür kalmasını istiyorsanız bir önlem olarak.

Yerleşimleri ayrıca, aşağıdakiler gibi özellikler tarafından kesilebilecekleri anlamına gelir. overflow: hidden veya kullanımı clip-path.

Söz verdiğimiz gibi, burada tartıştığımız yöntemlerden yalnızca border yapabilir.

Sıklıkla unutulan sınırla ilgili bir özellik border-image. Sözdizimi biraz garip olabilir gerçek görüntülerle kullanmaya çalışırken.

Ancak gizli bir gücü vardır – CSS gradyanları teknik olarak görüntü olduğu için gradyan sınırları oluşturmanıza da olanak tanır:

Bu, normal bir kenarlık genişliği ve stili tanımlamayı gerektirir (ancak şu şekilde görüntülenecektir: solid stil değerinden bağımsız olarak), ardından border-image bir ekleme ile degrade sözdizimini kullanabilen özellik. Gradyandan sonraki sayı, slice gradyanımız için basitçe kullanabileceğimiz değer 1 degradenin boyutlandırmasını/bozulmasını esasen değiştirmemek.

div {
border: 10px solid;
border-image: linear-gradient(to right, purple, pink) 1;
}

Kenarlığı yalnızca bir tarafa yerleştirmek için önce diğer tarafları sıfıra ayarladığınızdan emin olun, aksi takdirde bazı tarayıcılar yine de tüm taraflara ekleyecektir:

div {
border-style: solid;
border-width: 0;
border-left-width: 3px;
}

Dezavantajı, bu sınırların olumsuzluk saygı border-radiusbu nedenle, bunu sağlayan bir çözüme ihtiyacınız varsa, kartlardaki degradelerin nasıl eklendiğine göz atmak için Müfettiş’i kullanabilirsiniz. ModernCSS ana sayfa 😉