Bagaimana untuk Mencipta Tindanan Sempadan Menggunakan Elemen Pseudo?

Mencipta Tindanan Sempadan

Untuk mencapai kesan tindanan sempadan, seperti yang ditunjukkan dalam imej yang disediakan, anda boleh menggunakan teknik berikut:

Menggunakan Pseudo Elemen

Unsur pseudo, seperti ::before atau ::after, sediakan cara yang mudah untuk mencipta tindanan jidar tanpa menambah penanda tambahan. Mereka membenarkan kawalan mudah ke atas kedudukan dan saiz:

CSS:

.box-border {
  background: #94C120;
  width: 200px;
  height: 50px;
  margin: 50px;
  position: relative;
}

.box-border::before {
  content: "";
  position: absolute;
  top: -15px;
  left: -15px;
  width: 100%;
  height: 100%;
  border: 5px solid #fff;
  box-sizing: border-box;
}

HTML:

<div>

Atas ialah kandungan terperinci Bagaimana untuk Mencipta Tindanan Sempadan Menggunakan Elemen Pseudo?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!