Bagaimanakah Saya Boleh Mencipta Kesan Bayang Satu Sebelah dalam CSS?

Menjatuhkan Bayangan pada Satu Sisi Elemen

Mencipta kesan bayang-bayang pada elemen biasanya dicapai menggunakan sifat bayang-kotak, yang boleh menggunakan bayang-bayang pada semua sisi unsur. Walau bagaimanapun, dalam senario tertentu, bayang-bayang mungkin muncul pada satu sisi sahaja, seperti bahagian bawah, tanpa bertindih elemen lain yang bersebelahan dengannya.

Satu pendekatan untuk mencapai ini adalah dengan menggunakan pseudo- elemen seperti :selepas untuk mencipta lapisan tambahan di bawah elemen utama. Lapisan ini kemudiannya boleh diletakkan dan digayakan secara berasingan untuk mempamerkan kesan bayang-bayang yang diingini.

Pertimbangkan kod berikut:

#box {
  background-color: #3D6AA2;
  width: 160px;
  height: 90px;
  position: absolute;
  top: calc(10% - 10px);
  left: calc(50% - 80px);
}

.box-shadow:after {
  content: "";
  position: absolute;
  width: 100%;
  bottom: 1px;
  z-index: -1;
  transform: scale(.9);
  box-shadow: 0px 0px 8px 2px #000000;
}

Dalam contoh ini, kami mencipta elemen bekas dengan kotak ID dan tambah kelas CSS .box-shadow padanya. Elemen :after pseudo-elemen ditambah dalam .box-shadow dan digayakan dengan dimensi tertentu, kedudukan dan sifat bayang.

Dengan menetapkan bahagian bawah: 1px dan transform: skala(.9) pada :after pseudo- elemen, kami mencipta bentuk yang sempit dan sedikit condong yang muncul di bawah elemen utama. Sifat bayang kotak kemudian menambah kesan bayang pada bentuk ini, menghasilkan penampilan bayang hanya pada bahagian bawah elemen utama.

Teknik ini membolehkan peletakan dan penyesuaian bayang yang tepat tanpa menjejaskan bahagian lain reka bentuk, menyediakan penyelesaian serba boleh untuk pelbagai keperluan susun atur.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mencipta Kesan Bayang Satu Sebelah dalam CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!