Bagaimanakah Saya Boleh Membuat Sempadan Separa dalam CSS untuk Kotak Saya?

Mengisytiharkan Sempadan Separa untuk Kotak CSS

Mencipta kotak CSS dengan sempadan yang muncul hanya pada bahagian tertentu boleh meningkatkan daya tarikan visual dan menyediakan utiliti . Walaupun CSS tidak membenarkan sempadan separa secara jelas, terdapat penyelesaian yang berkesan untuk mencapai kesan ini dengan anggun.

Sempadan Bawah Separa

Untuk kotak yang memaparkan sempadan sahaja di bahagian bawah, gunakan gaya 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;
}

Elemen div mencipta kotak utama, manakala div:after pseudo-element menambah sempadan bawah. Teknik ini merosot dengan anggun dan tidak memerlukan penanda tambahan.

Berbilang Sempadan Separa

Untuk membuat berbilang sempadan separa pada kotak yang sama, gunakan sifat imej sempadan dengan imej yang dihiris sebagai sumber. Ini membolehkan anda menentukan kedudukan dan dimensi setiap segmen sempadan:

div {
  width: 350px;
  height: 100px;
  background: url('image.png') no-repeat;
}

div:after {
  content: '';
  width: 350px;
  height: 1px;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-image: url('image.png') 60px 350px 5px 60px / 1px 1px;
}

Ringkasnya, walaupun CSS tidak menyokong sempadan separa asli, teknik ini menyediakan penyelesaian berkesan yang merosot dengan anggun dan menawarkan fleksibiliti dalam mereka bentuk secara visual rawatan sempadan kotak yang menarik.

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