border-boundaryÖğenin sınırları nasıl davrandığını etkileyen bir elemanın sınırları CSS seti kısıtlamaları özellik. Şu anda Working Draft durumunda olan CSS Round Display Level 1 spesifikasyonunda tanımlanmıştır. Bu, şimdiki ve resmi aday önerisi arasında bazı şeylerin değişebileceği anlamına gelir.
.element ( border-boundary: display; /* sets the boundary to the screen display */ )Bu özelliğin CSS Round Display spesifikasyonunda bulunması gerçeği, size neyin iyi olduğunu zaten söylüyor: dairesel arayüzler oluşturmak. Daha da spesifik olarak, border-boundary"Ekran kenarlığı etrafında kenarlıklar çizme" bölümünün altına düşer ve bu da iyi yaptığı şeyin başka bir ipucudur: bir öğenin kenarlarının dairesel arayüzlerin yuvarlak sınırına uymasına izin vermek.
Yuvarlak ekranlı akıllı bir saat hayal edin. Diyelim ki ekran 150 piksel kare. Ve içinde aynı boyutlarda olan turuncu bir kutu var.
Hiçbir şey, çılgınca, değil mi? Turuncu kutu, yuvarlatılmış ekrana uyuyor çünkü gizli olan kenarlardan taşıyor. Ama kutuya bir kenarlık eklendiğinde ne olduğuna bakın ...
Hmm, o kadar iyi değil. Yine, kutunun kenarları yuvarlak ekranın dışına taşar, bu nedenle bu süreçte kenarlığımız kırpılır.
border-boundaryResme uyan yer burası . Bir değeriyle kutuya eklemek display, kutunun kenarlığının ekranın yuvarlak şeklini izlemesine olanak tanır. Mülkün tarayıcı desteği şu anda tam anlamıyla sıfır olduğundan, istenen sonucun sahte bir görselini sunmama izin verin.
Arayüzlü saatler tasarlarken bunun ne kadar yararlı olabileceğini tahmin edebilirsiniz. CSS Çalışma Grubu, border-boundarygerçekten kullanışlı olabilecek olası kullanım durumlarının bir listesini hazırladı .
Sözdizimi
border-boundary: none | parent | display;- Başlangıç değeri:
none - Şunlar için geçerlidir: tüm öğeler
- Devralındı: evet
- Yüzdeler: n / a
- Hesaplanan değer: belirtildiği gibi
- Animasyon türü: ayrık
Değerler
none: sınırda sınır belirlenmez.parent: öğenin alanı ile üst öğesinin kenarlık kenarlarının birleştiği sınırı ayarlar.display: öğenin alanı ile görünüm penceresinin kenarlık kenarlarının birleştiği sınırı ayarlar.
Tarayıcı desteği
Yazma sırasında yok.
daha fazla okuma
- CSS Round Görüntü Düzey 1 belirtimi (Çalışma Taslağı)
- Yuvarlak Ekran Örnekleri (CSS Çalışma Grubu Wiki)
- CSS Round Display özellikleri (01.org)