Bagaimanakah Saya Boleh Membuat Sempadan Separa untuk Kotak Menggunakan CSS?

Membuat Sempadan Separa untuk Kotak dalam CSS

Dalam CSS, tidak mungkin untuk mengisytiharkan sempadan kotak secara langsung dengan saiz tertentu atau liputan separa. Walau bagaimanapun, terdapat pendekatan alternatif yang mencipta semula kesan ini dengan berkesan:

Penyelesaian:

Buat jidar CSS biasa untuk kotak dan tambahkan elemen kanak-kanak yang diletakkan dengan CSS untuk memanjangkan sempadan ke panjang yang dikehendaki. Berikut ialah contoh:

.box {
  width: 350px;
  height: 100px;
  background: lightgray;
  position: relative;
  margin: 20px;
  border: 1px solid black;
}

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

HTML:

<div class="box"></div>

Kod ini mencipta kotak dengan sempadan hitam biasa dan bar kelabu panjang 60px tambahan di bahagian bawah, mensimulasikan sempadan separa dengan berkesan. Teknik ini merosot dengan anggun dalam penyemak imbas lama yang tidak menyokong kedudukan CSS.

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