Batas-batas - Trik CSS

Anonim

The border-boundaryproperti di kendala CSS set ke batas-batas unsur yang mempengaruhi bagaimana perbatasan elemen berperilaku. Ini didefinisikan dalam spesifikasi CSS Round Display Level 1, yang saat ini dalam status Working Draft. Itu berarti banyak hal dapat berubah antara sekarang dan rekomendasi kandidat resmi.

.element ( border-boundary: display; /* sets the boundary to the screen display */ )

Fakta bahwa properti ini berada dalam spesifikasi CSS Round Display sudah memberi tahu Anda keunggulannya: membuat antarmuka melingkar. Lebih khusus lagi, border-boundaryberada di bawah bagian "Menggambar batas di sekitar batas tampilan" yang merupakan petunjuk lain untuk apa yang dilakukannya dengan baik: memungkinkan batas elemen untuk menghormati batas bundar dari antarmuka melingkar.

Bayangkan, jika Anda mau, jam tangan pintar dengan layar bundar. Katakanlah layar itu berukuran 150px persegi. Dan di dalamnya ada kotak oranye dengan dimensi yang sama.

Tidak ada, gila, bukan? Kotak oranye sesuai dengan tampilan bulat karena melebihi tepinya, yang tersembunyi. Tapi lihat apa yang terjadi ketika perbatasan ditambahkan ke kotak…

Hmm, tidak terlalu bagus. Sekali lagi, tepi kotak meluap dari tampilan bundar, jadi perbatasan kita terpotong dalam prosesnya.

Di situlah border-boundarycocok dengan gambar. Menambahkannya ke kotak dengan nilai displaymemungkinkan batas kotak mengikuti bentuk bulat dari tampilan. Karena dukungan browser properti saat ini benar-benar nihil, izinkan saya untuk menawarkan visual tiruan dari hasil yang diinginkan.

Lihat itu? Perbatasan menghormati bentuk bulat layar, mencegahnya terpotong.

Anda dapat membayangkan betapa bergunanya hal ini saat merancang jam tangan dengan antarmuka. Kelompok Kerja CSS telah mengumpulkan daftar kemungkinan kasus penggunaan yang border-boundarybenar-benar berguna.

Sintaksis

border-boundary: none | parent | display;
  • Nilai awal: none
  • Berlaku untuk: semua elemen
  • Diwariskan: ya
  • Persentase: n / a
  • Nilai yang dihitung: seperti yang ditentukan
  • Jenis animasi: diskrit

Nilai

  • none: tidak ada batas yang ditetapkan di perbatasan.
  • parent: mengatur batas tempat elemen area dan tepi tepi induknya bertemu.
  • display: menyetel batas tempat area elemen dan tepi tepi viewport bertemu.

Dukungan browser

Tidak ada pada saat penulisan.

Bacaan lebih lanjut

  • Spesifikasi CSS Round Display Level 1 (Draf Kerja)
  • Contoh Tampilan Bulat (Wiki Kelompok Kerja CSS)
  • Spesifikasi CSS Round Display (01.org)