Bagaimanakah Saya Boleh Membuat Sempadan Separa pada Kotak CSS Menggunakan Teknik Kreatif?

Cara Kreatif untuk Menggayakan Kotak dengan Sempadan Separa dalam CSS

Dalam bidang CSS, tidak selalu mungkin untuk mengisytiharkan saiz tertentu atau jidar separa untuk kotak. Walau bagaimanapun, terdapat cara bijak untuk mencapai kesan yang diingini sambil mengekalkan kebolehaksesan dan kemerosotan yang anggun.

Pertimbangkan contoh yang diberikan dalam pertanyaan: kotak dengan lebar 350px yang hanya memaparkan sempadan bawah dalam 60px pertamanya. Ini boleh disimulasikan dengan berkesan menggunakan gabungan peraturan CSS:

div {
  width: 350px;
  height: 100px;
  background: lightgray;
  position: relative;
  margin: 20px;
}

div:after {
  content: '';
  width: 60px;
  height: 4px;
  background: gray;
  position: absolute;
  bottom: -4px;
}

Dengan menambahkan elemen pseudo kosong (:selepas) pada bekas kotak, kami boleh menambah sempadan bawah separa secara dinamik. Lebar dan ketinggian elemen pseudo menentukan sejauh mana sempadan, manakala kedudukannya memastikan ia muncul semata-mata di kawasan kotak yang dikehendaki.

Teknik ini menurun dengan lancar walaupun sokongan CSS terhad. Dalam penyemak imbas yang tidak faham :after, sempadan separa hanya akan disembunyikan, mengekalkan reka letak keseluruhan dan kebolehaksesan.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Membuat Sempadan Separa pada Kotak CSS Menggunakan Teknik Kreatif?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!