Bagaimana untuk Mencipta Kesan Sempadan Tindanan Menggunakan Elemen Pseudo CSS?

Menindih Sempadan pada Div Kanak-kanak dengan CSS

Dalam bidang reka bentuk web, mewujudkan keseimbangan dan kedalaman visual adalah penting. Satu teknik yang berkesan ialah menindih jidar pada div kanak-kanak, mengubah elemen ringkas kepada komponen yang menarik secara visual.

Dalam kes ini, kami menyasarkan untuk meniru estetik yang ditunjukkan dalam imej: jidar yang ditindih dengan elegan pada kandungan, mewujudkan satu imej yang halus kesan lagi memberi kesan. Walaupun percubaan awal untuk menggunakan indeks-z terbukti tidak berjaya, terdapat penyelesaian yang lebih cekap menggunakan elemen pseudo CSS.

Memperkenalkan elemen pseudo CSS :sebelum! Alat berkuasa ini membolehkan anda mencipta elemen maya dalam elemen sedia ada, tanpa memerlukan penanda HTML tambahan. Dengan meletakkan dan menggayakan :sebelum, kami boleh mencapai kesan tindanan sempadan yang diingini dengan mudah.

Pertimbangkan kod berikut:

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 :sebelum sebagai elemen pseudo dalam kelas .button, kita boleh mencipta sempadan lancar yang menindih kandungan dengan mudah. Teknik ini memberikan kawalan yang luar biasa ke atas kedudukan dan saiz sempadan, membolehkan penyesuaian yang tepat.

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