Bagaimanakah Saya Boleh Mencipta Drop Shadow Sebelah dalam CSS?

Mencipta Drop Shadow Sebelah

Mencapai bayang jatuh yang hanya mempengaruhi satu sisi elemen boleh menjadi keperluan biasa dalam web reka bentuk. Sebagai contoh, anda mungkin menghadapi senario di mana anda mahu bayang jatuh di bawah elemen tanpa bertindih elemen bersebelahan.

Satu kaedah untuk mencapai kesan ini ialah melalui sifat bayang-kotak, yang membolehkan anda menentukan saiz , hamparan dan warna bayang-bayang di sekeliling unsur. Walau bagaimanapun, kelakuan lalai bayang-bayang kotak adalah untuk mencipta bayang-bayang pada semua sisi elemen.

Mencipta Bayangan Jatuh Bawah Sahaja

Untuk mencipta titisan bayang yang hanya dipaparkan di bawah elemen, anda boleh mencipta elemen pseudo dan meletakkannya di bahagian bawah elemen induk. Elemen pseudo ini kemudiannya akan menerima kesan bayang-bayang.

Berikut ialah contoh yang dikemas kini daripada soalan asal menggunakan sintaks CSS moden:

#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;
}

Kod ini akan mencipta bayang-bayang jatuh yang hanya memanjang ke bawah dari bahagian bawah elemen #kotak, dengan berkesan memberikan kesan bayangan bahagian bawah sahaja. Elemen pseudo diletakkan di bahagian bawah dengan indeks z -1 untuk memastikan ia muncul di belakang elemen utama.

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