Cara menggunakan CSS untuk mencapai kesan bayangan elemen-tutorial css-php.cn

Cara menggunakan CSS untuk mencapai kesan bayangan elemen

WBOY

Lepaskan： 2023-11-21 18:36:37

asal

2251 orang telah melayarinya

Cara menggunakan CSS untuk mencapai kesan bayangan elemen

Kaedah menggunakan CSS untuk mencapai kesan bayangan elemen memerlukan contoh kod khusus

Dalam reka bentuk web, kesan bayangan boleh menambah rasa tiga dimensi dan lapisan pada elemen halaman, menjadikan halaman lebih kaya dan lebih jelas . CSS (Cascading Style Sheets) menyediakan pelbagai kaedah dan sifat untuk melaksanakan kesan bayang-bayang jatuh.

1. Atribut box-shadow
Atribut box-shadow ialah atribut baharu dalam CSS3 yang digunakan untuk mencapai kesan bayangan elemen. Dengan menambahkan atribut bayang-kotak pada elemen, anda boleh mencapai kesan bayang-bayang pada elemen, menjadikan elemen terapung keluar dari halaman dan meningkatkan kesan tiga dimensi. Sintaks atribut

box-shadow adalah seperti berikut:
box-shadow: h-shadow v-shadow blur spread color inset

Antaranya, maksud khusus setiap parameter adalah seperti berikut:

h-; bayang-bayang: kedudukan bayang-bayang mendatar, yang boleh menjadi nilai Positif (ke kanan) atau nilai negatif (ke kiri); kabur: jarak kabur, nilai adalah 0 kepada nilai antara infiniti positif, lebih besar nilai, lebih tinggi tahap kabur
spread: pengembangan saiz bayang-bayang, apabila nilai adalah nilai negatif, bayang-bayang akan mengecut kepada di dalam elemen, apabila nilai adalah nilai positif, bayang-bayang akan berkembang ke Luar elemen
warna: warna bayang-bayang, anda boleh menggunakan nilai warna, nilai RGB atau nilai heksadesimal
inset: nilai pilihan, jika ini nilai ditentukan, kesan bayang-bayang akan menjadi bayang-bayang dalam.
Berikut ialah contoh kod khusus yang melaksanakan kotak teks dengan kesan bayang-bayang:

<!DOCTYPE html>
<html>
<head>
    <style>
        .shadow-box {
            width: 200px;
            height: 40px;
            padding: 10px;
            border: none;
            border-radius: 5px;
            box-shadow: 2px 2px 5px 2px rgba(0, 0, 0, 0.5);
        }
    </style>
</head>
<body>
    <input type="text" class="shadow-box" placeholder="请输入内容">
</body>
</html>

Salin selepas log masuk

2. Atribut bayang-teks

Selain atribut bayang-kotak, CSS juga menyediakan atribut bayangan-teks untuk mencapai kesan bayang-bayang pada teks. Dengan menambahkan atribut bayang-teks pada elemen teks, anda boleh menambah kesan bayang-bayang pada teks untuk menjadikannya lebih menonjol dan tiga dimensi. Sintaks atribut

text-shadow adalah seperti berikut:

text-shadow: h-shadow v-shadow blur color

Antaranya, makna khusus setiap parameter adalah seperti berikut:

h-shadow: kedudukan bayang-bayang mendatar, yang boleh menjadi nilai positif (ke kanan) atau negatif (ke kiri); jarak kabur, antara 0 hingga Nilai positif antara infiniti, semakin besar nilainya, semakin tinggi tahap kabur

warna: warna bayang-bayang, anda boleh menggunakan nilai warna, nilai RGB atau nilai perenambelasan.

<!DOCTYPE html>
<html>
<head>
    <style>
        .shadow-title {
            font-size: 24px;
            color: #333;
            text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
        }
    </style>
</head>
<body>
    <h1 class="shadow-title">投影效果标题</h1>
</body>
</html>

Salin selepas log masuk

Melalui contoh kod di atas, kita dapat melihat bahawa kesan bayang-bayang elemen boleh dicapai dengan mudah menggunakan ciri-ciri bayang-kotak dan bayang-bayang teks CSS. Dalam pembangunan sebenar, kami boleh melaraskan nilai parameter dan tetapan warna mengikut keperluan khusus untuk mencapai kesan unjuran yang berbeza untuk meningkatkan kesan visual dan pengalaman pengguna halaman.

Atas ialah kandungan terperinci Cara menggunakan CSS untuk mencapai kesan bayangan elemen. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!