Bagaimana untuk Mencipta Tindanan Sempadan untuk Div ​​Kanak-kanak dengan Elemen Pseudo?

Mencipta Tindanan Sempadan untuk Div ​​Kanak-kanak

Masalah:

Anda perlu mereka bentuk sempadan yang menindih kandungan div kanak-kanak, serupa dengan imej disediakan.

Kod HTML dan CSS:

<div class="box-border box-border-participe">
  <div class="box-participe">
    <a>Participe</a>
  </div>
</div>

.box-participe {
  background-color: #94C120;
  padding: 10px 40px;
}

Penyelesaian:

Untuk mencapai ini menggunakan pseudo elemen, anda boleh membuat sempadan dan mengelakkan penanda tambahan. Anda juga boleh mengawal kedudukan dan saiznya dengan mudah:

body {
  background: grey;
}

.button {
  background: #94c120;
  width: 200px;
  height: 50px;
  margin: 50px;
  position: relative;
}

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

Dengan menggunakan kaedah ini, anda boleh membuat tindanan jidar yang bergaya untuk div anak anda dengan mudah, meningkatkan daya tarikan visual tapak web anda.

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