Paano Gumamit ng CSS box-shadow: 13 Mga Trick at Halimbawa

Paano Gumamit ng CSS box-shadow: 13 Mga Trick at Halimbawa

Ang CSS ang ginagamit ng mga developer ng wika upang makapag-istilo ng isang webpage. Kinokontrol nito kung paano ipinapakita ang mga elemento ng HTML sa isang screen, sa papel, o sa anumang iba pang anyo ng media. Nagbibigay ang CSS ng buong kapangyarihan sa pagpapasadya upang mai-istilo ang webpage sa iyong sariling imahe.





Maaari mong baguhin ang kulay ng background ng isang elemento, istilo ng font, kulay ng font, box-shadow, margin, at maraming iba pang mga pag-aari gamit ang CSS. Dadalhin ka namin sa ilang mabisang paggamit ng box-shadow sa gabay na ito.



Ano ang CSS box-shadow?

Ang box-shadow ginagamit ang pag-aari upang maglapat ng anino sa mga elemento ng HTML. Ito ay isa sa mga pinaka ginagamit na pag-aari ng CSS para sa mga kahon ng estilo o imahe.





CSS Syntax:

box-shadow: [horizontal offset] [vertical offset] [blur radius] [optional spread radius] [color];
  1. pahalang na offset: Kung ang pahalang na offset ay positibo, ang anino ay nasa kanan ng kahon. At kung ang pahalang na offset ay negatibo, ang anino ay nasa kaliwa ng kahon.
  2. patayong offset: Kung positibo ang patayong offset, ang anino ay nasa ibaba ng kahon. At kung ang patayong offset ay negatibo, ang anino ay nasa itaas ng kahon.
  3. lumabo radius: Kung mas mataas ang halaga, mas malabo ang anino.
  4. kumalat na radius: Ito ay nangangahulugan kung gaano dapat kumalat ang anino. Ang mga positibong halaga ay nagdaragdag ng pagkalat ng anino, ang mga negatibong halaga ay nagbabawas ng pagkalat.
  5. Kulay: Ito ay nangangahulugan ng kulay ng anino. Gayundin, sinusuportahan nito ang anumang format ng kulay tulad ng rgba, hex, o hsla.

Ang pag-blur, pagkalat, at mga parameter ng kulay ay opsyonal. Ang pinaka-kagiliw-giliw na bahagi ng box-shadow ay maaari kang gumamit ng isang kuwit upang paghiwalayin ang mga halagang box-shadow anumang bilang ng beses. Maaari itong magamit upang lumikha ng maraming mga hangganan at anino sa mga elemento.



1. Magdagdag ng isang madilim na kahon-anino sa Kaliwa, Kanan, at Ibaba ng Kahon

Maaari kang magdagdag ng masyadong malabo na mga anino sa tatlong panig (kaliwa, kanan at ibaba) ng kahon gamit ang sumusunod na box-shadow CSS kasama ang iyong target na elemento ng HTML:

box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;

Output:



2. Magdagdag ng isang madilim na kahon-anino sa Lahat ng Mga panig

Maaari kang magdagdag ng mga light shadow sa lahat ng panig ng kahon gamit ang sumusunod na box-shadow CSS kasama ang iyong target na elemento ng HTML:



box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;

Output:

3. Magdagdag ng isang Manipis na box-shadow sa Ibabang at Kanan na Mga Gilid

Maaari kang magdagdag ng mga anino sa ibaba at kanang bahagi ng kahon gamit ang sumusunod na box-shadow CSS kasama ang iyong target na elemento ng HTML:

bakit ang aking mga laro ay patuloy na nag-crash
box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;

Output:

4. Magdagdag ng isang Madilim na kahon-anino sa Lahat ng Mga panig

Maaari kang magdagdag ng madilim na anino sa lahat ng panig ng kahon gamit ang sumusunod na box-shadow CSS sa iyong target na elemento ng HTML:

box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;

Output:

5. Magdagdag ng Spread Shadow sa Lahat ng panig

Maaari kang magdagdag ng pagkalat ng anino sa lahat ng panig ng kahon gamit ang sumusunod na utos sa iyong target na elemento ng HTML:

box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;

Output:

6. Magdagdag ng Thin Border Shadow sa Lahat ng panig

Maaari kang magdagdag ng isang simpleng anino ng hangganan sa lahat ng panig ng kahon gamit ang sumusunod na CSS sa iyong target na elemento ng HTML:

box-shadow: rgba(6, 24, 44, 0.4) 0px 0px 0px 2px, rgba(6, 24, 44, 0.65) 0px 4px 6px -1px, rgba(255, 255, 255, 0.08) 0px 1px 0px inset;

Output:

7. Magdagdag ng isang box-shadow sa Ibabang at Kaliwa na Mga Gilid

Maaari kang magdagdag ng isang anino sa ilalim at kaliwang bahagi ng kahon gamit ang sumusunod na box-shadow CSS kasama ang iyong target na elemento ng HTML:

box-shadow: rgba(0, 0, 0, 0.1) -4px 9px 25px -6px;

Output:

8. Magdagdag ng isang madilim na kahon-anino sa Itaas at Kaliwang panig, Madilim na Anino sa Ibabang at Kanan na Mga Gilid

Maaari kang magdagdag ng isang ilaw na anino sa itaas at kaliwang bahagi ng kahon pati na rin ang isang madilim na anino sa ilalim at kanang mga gilid ng kahon gamit ang sumusunod na CSS sa iyong target na elemento ng HTML:

box-shadow: rgba(136, 165, 191, 0.48) 6px 2px 16px 0px, rgba(255, 255, 255, 0.8) -6px -2px 16px 0px;

Output:

9. Magdagdag ng isang Manipis, May kulay na Border Shadow sa Lahat ng panig

Maaari kang magdagdag ng isang simpleng may kulay na anino ng hangganan sa lahat ng panig ng kahon gamit ang sumusunod na box-shadow CSS kasama ang iyong target na elemento ng HTML:

box-shadow: rgba(3, 102, 214, 0.3) 0px 0px 0px 3px;

Output:

10. Magdagdag ng Maramihang mga Colored Border Shadows sa Ibabang at Kaliwa na Mga Gilid ng Kahon

Maaari kang magdagdag ng maraming may kulay na mga anino sa hangganan sa ilalim at kaliwang bahagi ng kahon gamit ang sumusunod na CSS sa iyong target na elemento ng HTML:

box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px inset, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset;

Output:

kung paano gumawa ng isang paypal account sa ilalim ng 18

11. Magdagdag ng Maramihang mga May kulay na Mga Shadow sa Ibabang

Maaari kang magdagdag ng maraming kulay na mga anino sa hangganan sa ilalim ng kahon gamit ang sumusunod na box-shadow CSS kasama ang iyong target na elemento ng HTML:

box-shadow: rgba(240, 46, 170, 0.4) 0px 5px, rgba(240, 46, 170, 0.3) 0px 10px, rgba(240, 46, 170, 0.2) 0px 15px, rgba(240, 46, 170, 0.1) 0px 20px, rgba(240, 46, 170, 0.05) 0px 25px;

Output:

12. Magdagdag ng Maramihang mga May kulay na Mga Anino sa Ibaba at Kanang Mga Gilid ng Kahon

Maaari kang magdagdag ng maraming kulay na mga anino sa hangganan sa ibaba at kanang mga gilid ng kahon gamit ang sumusunod na CSS sa iyong target na elemento ng HTML:

box-shadow: rgba(240, 46, 170, 0.4) 5px 5px, rgba(240, 46, 170, 0.3) 10px 10px, rgba(240, 46, 170, 0.2) 15px 15px, rgba(240, 46, 170, 0.1) 20px 20px, rgba(240, 46, 170, 0.05) 25px 25px;

Output:

13. Magdagdag ng Mga Light Shadow sa Kaliwa at Kanan na Mga Gilid, Ikalat ang Shadow sa Ibabang

Maaari kang magdagdag ng mga light shadow sa kaliwa at kanang bahagi at kumalat ang anino sa ilalim ng kahon gamit ang sumusunod na box-shadow CSS kasama ang iyong target na elemento ng HTML:

box-shadow: rgba(0, 0, 0, 0.09) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;

Output:

Isama ang CSS Gamit ang isang Pahina ng HTML

Ngayon alam mo kung paano magdagdag ng mga cool na box-shadow effects gamit ang CSS, madali mong maisasama ang mga ito sa mga elemento ng HTML sa maraming paraan.

Kaugnay: 11 Mga kapaki-pakinabang na tool upang Suriin, Linisin, at I-optimize ang Mga CSS File

Maaari mong i-embed ito sa mismong pahina ng HTML o ilakip ito bilang isang hiwalay na dokumento. Mayroong tatlong paraan upang maisama ang CSS sa isang dokumentong HTML:

Panloob na CSS

Ang mga naka-embed o Panloob na Style Sheet ay ipinasok sa loob ng seksyon ng isang dokumento ng HTML gamit ang elemento. Maaari kang lumikha ng anumang bilang ng mga elemento sa isang dokumento ng HTML, ngunit dapat na nakapaloob ang mga ito sa pagitan ng at mga tag Narito ang isang halimbawa na nagpapakita kung paano gamitin ang Panloob na CSS sa isang dokumento na HTML:





CSS box-shadow

.heading {
text-align: center;
}
.image-box {
display: block;
margin-left: auto;
margin-right: auto;
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}




Style 4





Inline CSS

Ginagamit ang Inline CSS upang magdagdag ng mga natatanging panuntunan sa istilo sa isang elemento ng HTML. Maaari itong magamit sa isang elemento ng HTML sa pamamagitan ng style katangian Ang katangiang istilo ay naglalaman ng mga katangian ng CSS sa anyo ng 'halaga ng ari-arian' pinaghiwalay ng isang titikting titik ( ; ).

Kaugnay: Alamin Kung Paano Bumuo ng Dalawang-Dimensional na Mga Website Sa CSS Grid

Ang lahat ng mga pag-aari ng CSS ay dapat na nasa isang linya ibig sabihin ay dapat na walang mga linya ng break sa pagitan ng mga katangian ng CSS. Narito ang isang halimbawa na nagpapakita kung paano gumamit ng inline CSS na may isang HTML na dokumento:





CSS box-shadow



Style 4





Panlabas na CSS

Ang Panlabas na CSS ay ang pinaka mainam na paraan upang mag-apply ng mga estilo sa mga dokumentong HTML. Naglalaman ang isang panlabas na style sheet ng lahat ng mga panuntunan sa istilo sa isang magkakahiwalay na dokumento (.css file), ang dokumentong ito ay nai-link sa HTML na dokumento gamit ang tag Ang pamamaraang ito ay ang pinakamahusay na pamamaraan para sa pagtukoy at paglalapat ng mga estilo sa mga dokumento ng HTML dahil ang apektadong HTML file ay nangangailangan ng kaunting mga pagbabago sa markup. Narito ang isang halimbawa na nagpapakita kung paano gumamit ng panlabas na CSS sa isang dokumentong HTML:

Lumikha ng isang bagong CSS file kasama ang .css karugtong Idagdag ngayon ang sumusunod na CSS code sa loob ng file na iyon:

.heading {
text-align: center;
}
.image-box {
display: block;
margin-left: auto;
margin-right: auto;
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}

Panghuli, lumikha ng isang dokumento ng HTML at idagdag ang sumusunod na code sa loob ng dokumentong iyon:

mga app na nagbibigay sa iyo ng isang numero ng telepono




CSS box-shadow




Style 4





Tandaan na ang CSS file ay naka-link sa dokumento ng HTML sa pamamagitan ng tag at href katangian

Ang lahat ng tatlong pamamaraan sa itaas (Panloob na CSS, Inline CSS at Panlabas na CSS) ay magpapakita ng parehong output-

Gawing Elegant ang iyong Webpage Sa CSS

Sa pamamagitan ng paggamit ng CSS mayroon kang buong kontrol sa estilo ng iyong webpage. Maaari mong ipasadya ang bawat elemento ng HTML gamit ang iba't ibang mga katangian ng CSS. Ang mga dev mula sa buong mundo ay nag-aambag sa mga pag-update ng CSS, at ginagawa nila ito mula pa noong mailabas ito noong 1996. Tulad nito, maraming kailangang malaman ang mga nagsisimula!

Sa kabutihang palad, ang CSS ay baguhan-friendly. Maaari kang makakuha ng ilang mahusay na kasanayan sa pamamagitan ng pagsisimula sa ilang simpleng mga utos at makita kung saan ka dadalhin ng iyong pagkamalikhain.

Magbahagi Magbahagi Mag-tweet Email 10 Mga Simpleng Halimbawa ng CSS Code na Maaari Mong Malaman sa loob ng 10 Minuto

Kailangan mo ng tulong sa CSS? Subukan ang mga pangunahing halimbawang CSS code upang magsimula, pagkatapos ay ilapat ang mga ito sa iyong sariling mga web page.

Basahin Susunod Mga Kaugnay na Paksa
  • Programming
  • Disenyo ng web
  • CSS
Tungkol sa May-akda Yuvraj Chandra(60 Mga Artikulo Na-publish)

Si Yuvraj ay isang undergraduate na mag-aaral sa Computer Science sa University of Delhi, India. Masigasig siya sa Full Stack Web Development. Kapag hindi siya nagsusulat, sinisiyasat niya ang lalim ng iba't ibang mga teknolohiya.

Higit pa Mula kay Yuvraj Chandra

Mag-subscribe sa aming newsletter

Sumali sa aming newsletter para sa mga tip sa tech, pagsusuri, libreng ebook, at eksklusibong deal!

Mag-click dito upang mag-subscribe