Bagaimana Saya Boleh Membuat Sempadan Kotak Separa dalam CSS?

Sempadan Kotak Separa dalam CSS

Dalam CSS, tidak mustahil untuk mencipta kotak dengan sempadan yang hanya memanjang sebahagiannya merentasi kotak. Walau bagaimanapun, kesan yang serupa boleh dicapai dengan penyelesaian yang bijak.

Mencipta Sempadan Separa

Teknik ini melibatkan mencipta div bekas dengan dimensi dan warna latar belakang yang dikehendaki. Dalam div ini, elemen pseudo yang lebih kecil diletakkan menggunakan pemilih :selepas. Elemen pseudo ini mewakili sempadan separa dan diletakkan dan bersaiz sewajarnya.

Sebagai contoh, untuk membuat kotak lebar 350px dengan sempadan lebar 60px di bahagian bawah, anda boleh menggunakan CSS berikut:

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

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

Pendekatan ini memberikan fleksibiliti dari segi saiz sempadan, kedudukan dan warna. Ia juga memastikan kemerosotan yang anggun jika elemen pseudo tidak disokong oleh penyemak imbas, memaparkan kotak ringkas tanpa sempadan separa.

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