Sınır yarıçapı - CSS Hileleri

border-radiusCSS aracılığıyla herhangi bir öğeye "yuvarlatılmış köşeler" verebilirsiniz . Yalnızca ilgili bir renk değişikliği olup olmadığını fark edeceksiniz. Örneğin, öğenin üzerinde bulunduğu öğeden farklı bir arka plan rengi veya kenarlığı varsa. Basit örnekler:

#example-one ( border-radius: 10px; background: #BADA55; ) #example-two ( border-radius: 10px; border: 3px solid #BADA55; )

Artık gerçekten gerekli değil, ancak mümkün olan en iyi tarayıcı desteği için -webkit-ve ile önek koyabilirsiniz -moz-:

.round ( /* Safari 3-4, iOS 1-3.2, Android 1.6- */ -webkit-border-radius: 12px; /* Firefox 1-3.6 */ -moz-border-radius: 12px; /* Opera 10.5, IE 9, Safari 5, Chrome, Firefox 4, iOS 4, Android 2.1+ */ border-radius: 12px; )

Bu özelliklerin sırasına dikkat edin: ilk önce satıcı önekleri ve en sonda önekli olmayan "spesifikasyon" sürümü listelenir. Bunu yapmanın doğru yolu budur. Sınır yarıçapı, neden bu şekilde yaptığımızın özellikle iyi bir örneğidir. Kullanmanın biraz daha karmaşık sürümünde border-radius(bir yerine iki değer ilettiğinizde), eski -webkit-sağlayıcı öneki "spec" sürümünden tamamen farklı bir şey yapacaktır. Dolayısıyla, aynı değerleri üç özelliğe de körü körüne kopyalayıp yapıştırırsak, tarayıcılar arasında farklı sonuçlar görebiliriz. Bu senaryo hakkında daha fazla bilgi edinin. Uzun vadede en tutarlılık için, en son "spesifikasyon" sürümünü listelemek en iyisidir.

Bu günlerde, burada tartışıldığı gibi ön ekleri kaldırmak ve sadece sınır-yarıçapı kullanmak oldukça gerçekçi.

Öğenin bir görüntü arka planı varsa, doğal olarak yuvarlatılmış köşeden kırpılır:

#example-three ( border-radius: 20px; background: url(bglines.png.webp); /* will get clipped */ )

Bazen mevcut background-colorolduğunda sınırın dışında bir "sızıntı" görebilirsiniz border-radius. (görmek). Bunu önlemek için arka plan klibi kullanırsınız:

.round ( border-radius: 10px; /* Prevent background color leak outs */ -webkit-background-clip: padding-box; -moz-background-clip: padding; background-clip: padding-box; )

Tek bir değerle, border-radiusbir elemanın dört köşesinin tamamında aynı olacaktır. Ancak durumun böyle olması gerekmez. Dilerseniz her köşeyi ayrı ayrı belirtebilirsiniz:

.round ( border-radius: 5px 10px 15px 20px; /* top left, top right, bottom right, bottom left */ )

Ayrıca iki veya üç değer de belirtebilirsiniz. MDN bunu iyi açıklıyor:

Eğer bir değer ayarlanır, bu yarıçap için geçerli her 4 köşe .
Eğer iki değer ayarlanır, ilk uygulanır top-leftve bottom-rightköşe ikinci uygulanır top-rightve bottom-leftköşe.
Dört değerleri için geçerli top-left, top-right, bottom-right, bottom-leftbu sırayla köşesinde.
Üç değer: İkinci değer top-rightve ayrıca için de geçerlidir bottom-left.

#example-four ( border-radius: 5px 20px 5px; background: #BADA55; )

Ayrıca köşenin yuvarlatıldığı yarıçapları da belirtebilirsiniz. Başka bir deyişle, yuvarlamanın mükemmel şekilde dairesel olması gerekmez, eliptik olabilir. Bu, iki değer arasında eğik çizgi ("/") kullanılarak yapılır.

#example-five ( border-radius: 10px/30px; /* horizontal radius / vertical radius */ ) #example-six ( border-radius: 30px/10px; /* horizontal radius / vertical radius */ )

Not: Firefox yalnızca 3.5+ ve daha eski WebKit tarayıcılarında (örn. Safari 4) eliptik kenarlıkları desteklemektedir.

border-radiusYüzde olarak değerini belirtebilirsiniz . Bu, bir daire veya elips şekli oluşturmak istediğinizde özellikle kullanışlıdır, ancak kenarlık yarıçapının elemanların genişliğiyle doğrudan ilişkilendirilmesini istediğinizde kullanılabilir.

#example-seven, #example-eight ( border-radius: 50%; ) #example-eight ( width: 200px; )

Not: Safari'de border-radius için yüzde değerleri yalnızca 5.1+ sürümlerinde desteklenir. Opera'da yalnızca 11.5+ sürümünde desteklenir.

Satıcı önekleriyle birlikte her bir mülk şu şekildedir:

.round ( -webkit-border-top-left-radius: 1px; -webkit-border-top-right-radius: 2px; -webkit-border-bottom-right-radius: 3px; -webkit-border-bottom-left-radius: 4px; -moz-border-radius-topleft: 1px; -moz-border-radius-topright: 2px; -moz-border-radius-bottomright: 3px; -moz-border-radius-bottomleft: 4px; border-top-left-radius: 1px; border-top-right-radius: 2px; border-bottom-right-radius: 3px; border-bottom-left-radius: 4px; )

Not: Bu değerlerin her biri, kısaltmada (yatay yarıçap (boşluk) dikey yarıçap) eğik çizgiyle ayrılmış bir değer gibi davranan "5px 10px" gibi boşlukla ayrılmış bir değere sahip olabilir.

Kaynaklar

Kenarlık yarıçap kodu oluşturmak için hızlı araç
Mozilla Belgeleri
Mükemmel yarıçapı ararken
Artık border-radius ön ekine ihtiyacımız var mı?

İşte farklı özellikler ve değerlerle oynamak için küçük bir şey:

CodePen'de Chris Coyier (@chriscoyier) tarafından Kalem Tüm sınır yarıçapını görün.

Tarayıcı Desteği

Bu tarayıcı destek verileri, daha fazla ayrıntıya sahip olan Caniuse'den alınmıştır. Bir sayı, tarayıcının özelliği o sürümde ve sonrasında desteklediğini gösterir.