HTML ialah bahasa yang digunakan untuk menyediakan struktur halaman web, dan CSS membenarkan kami menggunakan gaya pada elemen. Pada halaman web, nilai sifat yang berbeza ditetapkan untuk menggunakan gaya yang berbeza, seperti warna latar belakang, saiz fon, jidar, jejari sempadan dan bayang-bayang kotak adalah salah satu daripadanya.

Blog ini akan membincangkan kaedah untuk menggunakan kesan bayangan pada elemen HTML.

Bagaimana untuk Menggugurkan Kesan Bayangan pada Elemen HTML Menggunakan CSS?

' bayangan kotak sifat ” menambah bayang di sekeliling elemen di mana dua atau lebih nilai kesan tambahan boleh dipisahkan dengan koma.

Sintaks sifat kotak-bayang diterangkan di bawah.

Sintaks

bayangan kotak : tiada |h-offset v-offset blur warna hamparan | sisipan | permulaan | mewarisi ;

Perihalan sintaks yang disebutkan di atas disenaraikan di bawah:

“ tiada ”: Ia ialah nilai lalai bagi sifat bayangan kotak.
“ h-offset ”: Nilai ini mewakili jarak mendatar.
“ v-offset ”: Nilai ini mentakrifkan jarak menegak.
“ blur ”: Nilai ketiga ialah kabur. Memaksimumkan nilainya akan memaksimumkan kesan kabur.
“ sebar ”: Nilai keempat mewakili hamparan bayang-bayang. Ia boleh memegang nilai positif atau negatif, di mana nilai positif meningkatkan sebaran, dan nilai negatif mengurangkannya.
“ warna ”: Nilai ini adalah pilihan, mewakili warna semasa.
“ permulaan ”: Nilai ini menetapkan sifat nilai awalnya.
“ mewarisi ”: Nilai ini mewarisi sifat unsur induknya.
“ sisipan ”: Nilai inset digunakan untuk membuat bayang-bayang di dalam kotak.

Mari lihat bagaimana kesan bayang-bayang kelihatan melalui contoh praktikal.

Contoh

Dalam fail HTML, pertama, tambahkan '

”. Di dalam elemen

ini, tambahkan tag

dan
untuk menyediakan kandungan ke halaman web.

HTML

< div >

< h1 > Bayang Kotak < / h1 >

< hlm > bayang kotak: 3px 8px < / hlm >

< / div >

Sekarang, gunakan sifat CSS pada elemen HTML yang ditambahkan.

CSS

div {

bayangan kotak : 3px 8px ;

}

Elemen div digunakan dengan sifat ' bayangan kotak 'dengan nilai' 3px 8px ”, yang mewakili offset mendatar dan ofset menegak.

Pengeluaran

Dalam bahagian seterusnya, elemen HTML akan digayakan dengan sifat yang berbeza.

CSS

div {

sempadan : 5px padu rgb ( 255 , 111 , 1 ) ;

bayangan kotak : 3px 8px 9px 4px #f4af1b ;

}

Berikut ialah sifat CSS tambahan yang digunakan pada elemen div:

“ sempadan ” harta diberikan nilai 5px pepejal rgb(255, 111,1) dengan 5px menunjukkan lebar sempadan, pepejal mewakili gaya sempadan dan rgb(255, 111, 1) ialah warna.
“ bayangan kotak ” sifat dengan nilai 3px 8px 9px 4px #f4af1b mewakili h-offset sebagai 3px, v-offset sebagai 8px, kabur sebagai 9px, spread sebagai 4px dan #f4af1b menentukan warna.

Kod yang diberikan di atas akan memaparkan elemen div seperti yang ditunjukkan di bawah:

Sekarang, dalam bahagian seterusnya, buat dua kotak yang mewakili dua elemen div. Kami akan memberikan setiap satu nilai berbilang kotak-bayang yang berbeza dan memerhatikan hasilnya.

HTML

= 'kotak1' >

> Bayang Kotak >

> bayangan kotak : 3px 8px 9px 4px #f4af1b >

> > >

= 'kotak2' >

> Bayang Kotak >

> bayangan kotak : 3px 8px 9px 4px #f4af1b >

>

Gaya kotak1 div

#kotak1 {

lebar : 40% ;

ketinggian : 140px ;

sempadan : 5px padu #ff9c83 ;

bayangan kotak : 8px 10px 15px 20px #807f7f ;

}

di sini:

“ #kotak1 ” digunakan untuk mengakses div dengan kotak id1.
“ lebar ” harta digunakan untuk penetapan lebar elemen.
“ ketinggian ” harta menetapkan ketinggian elemen.
“ sempadan ” diberi nilai 5px pepejal #ff9c83 di mana 5px menunjukkan lebar sempadan, pepejal mewakili gaya sempadan dan #ff9c83 ialah warna.
“ bayangan kotak ” harta akan ditetapkan sebagai “ 8px 10px 15px 20px #807f7f ” dengan 8px ialah ofset mendatar, 10px ialah ofset menegak, 15px ialah kesan kabur, 20px ialah kesan hamparan dan #807f7f ialah warna bayang-bayang.

Gaya kotak2 div

#kotak2 {

lebar : 40% ;

ketinggian : 140px ;

sempadan : 5px padu rgb ( 255 , 111 , 1 ) ;

bayangan kotak : sisipan 4px 8px #f4af1b ;

margin-kiri : 350px ;

}

Dapat diperhatikan bahawa kami telah menggayakan div box2 dengan sifat yang sama:

Petua Bonus: Menambah Berbilang Bayang-bayang pada Elemen HTML

' bayangan kotak sifat ” boleh digunakan untuk menambah berbilang kesan bayang-bayang pada elemen HTML. Ini boleh dilakukan menggunakan koma di antara setiap bayang-bayang seperti yang ditunjukkan dalam contoh di bawah:

bayang kotak : 6px 6px rgb ( 91 , 0 , 143 ) , 12px 5px rgb ( 201 , 8 , 8 ) , 16px 16px 8px rgb ( 226 , 213 , 29 ) ;

Seperti yang anda lihat, berbilang bayang telah berjaya digunakan:

Itu semua tentang penggunaan bayangan sempadan CSS.

Kesimpulan

' bayangan kotak ” harta dalam CSS digunakan untuk menggunakan kesan bayangan pada elemen HTML. Sifat ini terutamanya terdiri daripada dua nilai iaitu untuk ofset mendatar dan ofset menegak, tetapi boleh terdapat berbilang nilai seperti untuk kesan kabur, kesan jejari sebaran, warna dan banyak lagi. Selain itu, anda juga boleh menambah berbilang bayang pada elemen dengan menggunakan koma di antara setiap sifat bayang kotak. Artikel ini telah menerangkan sifat kotak-bayang CSS dengan contoh praktikal.

Bayang sempadan CSS