Cum se folosește CSS box-shadow: 13 trucuri și exemple

Cum se folosește CSS box-shadow: 13 trucuri și exemple

CSS este limba pe care dezvoltatorii o folosesc pentru a crea o pagină web. Controlează modul în care sunt afișate elementele HTML pe un ecran, pe hârtie sau în orice altă formă de suport. CSS oferă puterea completă de personalizare pentru a stiliza pagina web în propria imagine.





Puteți schimba culoarea de fundal a unui element, stilul fontului, culoarea fontului, umbra cutiei, marginea și numeroase alte proprietăți folosind CSS. Vă vom ghida prin câteva utilizări eficiente ale box-shadow în acest ghid.





Ce este CSS box-shadow?

The cutie-umbră proprietatea este utilizată pentru a aplica o umbră elementelor HTML. Este una dintre cele mai utilizate proprietăți CSS pentru stilizarea cutiilor sau a imaginilor.





Sintaxa CSS:

box-shadow: [horizontal offset] [vertical offset] [blur radius] [optional spread radius] [color];
  1. decalaj orizontal: Dacă decalajul orizontal este pozitiv, umbra va fi în dreapta casetei. Și dacă decalajul orizontal este negativ, umbra va fi în stânga casetei.
  2. offset vertical: Dacă decalajul vertical este pozitiv, umbra va fi sub casetă. Și dacă decalajul vertical este negativ, umbra va fi deasupra casetei.
  3. raza de estompare: Cu cât valoarea este mai mare, cu atât umbra va fi mai neclară.
  4. raza de raspandire: Înseamnă cât de mult ar trebui să se răspândească umbra. Valorile pozitive cresc răspândirea umbrei, valorile negative scad răspândirea.
  5. Culoare: Semnifică culoarea umbrei. De asemenea, acceptă orice format de culoare, cum ar fi rgba, hex sau hsla.

Parametrii de estompare, răspândire și culoare sunt opționale. Cea mai interesantă parte a box-shadow este că puteți utiliza o virgulă pentru a separa valorile box-shadow de câte ori. Aceasta poate fi utilizată pentru a crea mai multe margini și umbre pe elemente.



1. Adăugați o umbră Dim box în stânga, dreapta și partea de jos a casetei

Puteți adăuga umbre foarte slabe la trei laturi (stânga, dreapta și jos) ale casetei utilizând următorul CSS casetă-umbră cu elementul HTML țintă:

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

Ieșire:





2. Adăugați o umbră Dim box la All Sides

Puteți adăuga umbre luminoase pe toate laturile casetei utilizând următorul CSS-umbră casetă cu elementul HTML țintă:





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

Ieșire:

3. Adăugați o umbră de cutie subțire pe partea inferioară și dreapta

Puteți adăuga umbre în partea de jos și în partea dreaptă a casetei utilizând următorul CSS-umbră cu elementul HTML țintă:

ce înseamnă cartela SIM neprovizionată
box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;

Ieșire:

4. Adăugați o umbră întunecată la Toate laturile

Puteți adăuga umbră întunecată pe toate laturile casetei utilizând următorul CSS-umbră cu elementul HTML țintă:

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

Ieșire:

5. Adăugați Spread Shadow la All Sides

Puteți adăuga o umbră răspândită pe toate laturile casetei folosind următoarea comandă cu elementul HTML țintă:

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;

Ieșire:

6. Adăugați o umbră de margine subțire la toate laturile

Puteți adăuga o umbră de margine simplă pe toate laturile casetei utilizând următorul CSS cu elementul HTML țintă:

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;

Ieșire:

7. Adăugați o umbră de casetă în partea de jos și partea stângă

Puteți adăuga o umbră în partea de jos și din stânga casetei utilizând următorul CSS-umbră cu elementul HTML țintă:

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

Ieșire:

8. Adăugați o umbră de casetă Dim în părțile superioare și stânga, Dark Shadow în partea inferioară și partea dreaptă

Puteți adăuga o umbră deschisă în partea de sus și în partea stângă a casetei, precum și o umbră întunecată în partea de jos și dreapta a casetei utilizând următorul CSS cu elementul dvs. HTML vizat:

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

Ieșire:

9. Adăugați o umbră de margine subțire și colorată la toate laturile

Puteți adăuga o umbră de margine colorată simplă pe toate laturile casetei utilizând următorul CSS-umbră cu elementul HTML țintă:

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

Ieșire:

10. Adăugați mai multe umbre de margini colorate în partea de jos și partea stângă a casetei

Puteți adăuga mai multe umbre de margini colorate în partea de jos și din stânga casetei folosind următorul CSS cu elementul dvs. HTML vizat:

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

Ieșire:

cele mai bune jocuri Android care nu necesită internet

11. Adăugați mai multe umbre de margini colorate în partea de jos

Puteți adăuga mai multe umbre de margini colorate în partea de jos a casetei utilizând următorul CSS-umbră cu elementul HTML țintă:

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;

Ieșire:

12. Adăugați mai multe umbre de margini colorate în partea de jos și dreapta a casetei

Puteți adăuga mai multe umbre de margini colorate în partea de jos și dreapta a casetei utilizând următorul CSS cu elementul dvs. HTML vizat:

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;

Ieșire:

13. Adăugați umbre luminoase pe laturile stânga și dreapta, întindeți umbra în partea de jos

Puteți adăuga umbre luminoase în laturile stânga și dreapta și puteți întinde umbra în partea de jos a casetei utilizând următorul CSS-umbră casetă cu elementul HTML țintă:

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;

Ieșire:

Integrați CSS cu o pagină HTML

Acum știți cum să adăugați efecte cutii umbre folosind CSS, le puteți integra cu ușurință cu elemente HTML în mai multe moduri.

Legate de: 11 Instrumente utile pentru verificarea, curățarea și optimizarea fișierelor CSS

Puteți să-l încorporați în pagina HTML în sine sau să-l atașați ca un document separat. Există trei moduri de a include CSS într-un document HTML:

CSS intern

Foi de stil încorporate sau interne sunt inserate în secțiunea unui document HTML folosind element. Puteți crea orice număr de elemente dintr-un document HTML, dar acestea trebuie să fie incluse între și Etichete. Iată un exemplu care demonstrează cum se utilizează CSS intern cu un document 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





CSS în linie

Inline CSS este folosit pentru a adăuga reguli de stil unice unui element HTML. Poate fi folosit cu un element HTML prin stil atribut. Atributul style conține proprietăți CSS sub forma 'Valoarea proprietății' separate printr-un punct și virgulă ( ; ).

Conectat: Aflați cum să creați site-uri web bidimensionale cu grila CSS

Toate proprietățile CSS trebuie să fie într-o singură linie, adică nu trebuie să existe nicio întrerupere de linie între proprietățile CSS. Iată un exemplu care demonstrează cum se utilizează CSS inline cu un document HTML:





CSS box-shadow



Style 4





CSS extern

CSS extern este cel mai ideal mod de a aplica stiluri documentelor HTML. O foaie de stil externă conține toate regulile de stil într-un document separat (fișier .css), acest document este apoi legat de documentul HTML folosind etichetă. Această metodă este cea mai bună metodă pentru definirea și aplicarea stilurilor la documentele HTML, deoarece fișierul HTML afectat necesită modificări minime în marcaj. Iată un exemplu care demonstrează cum se utilizează CSS extern cu un document HTML:

Creați un nou fișier CSS cu .css extensie. Acum adăugați următorul cod CSS în acel fișier:

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

În cele din urmă, creați un document HTML și adăugați următorul cod în acel document:

ce este modul avion pe un telefon mobil




CSS box-shadow




Style 4





Rețineți că fișierul CSS este legat de documentul HTML prin eticheta și href atribut.

Toate cele trei metode de mai sus (CSS intern, CSS în linie și CSS extern) vor afișa aceeași ieșire-

Faceți pagina dvs. web elegantă cu CSS

Prin utilizarea CSS aveți control deplin asupra stilului paginii dvs. web. Puteți personaliza fiecare element HTML folosind diferite proprietăți CSS. Dezvoltatorii din întreaga lume contribuie la actualizările CSS și au făcut acest lucru de la lansarea sa în 1996. Ca atare, începătorii au multe de învățat!

Din fericire, CSS este potrivit pentru începători. Puteți obține o practică excelentă începând cu câteva comenzi simple și văzând unde vă duce creativitatea.

Acțiune Acțiune Tweet E-mail 10 exemple de cod CSS simple pe care le puteți învăța în 10 minute

Aveți nevoie de ajutor cu CSS? Încercați aceste exemple de cod CSS de bază pentru a începe, apoi aplicați-le pe propriile pagini web.

Citiți în continuare
Subiecte asemănătoare
  • Programare
  • Web design
  • CSS
Despre autor Yuvraj Chandra(60 de articole publicate)

Yuvraj este student la Universitatea din Delhi, India. Este pasionat de dezvoltarea web Full Stack. Când nu scrie, explorează profunzimea diferitelor tehnologii.

Mai multe de la Yuvraj Chandra

Aboneaza-te la newsletter-ul nostru

Alăturați-vă newsletter-ului pentru sfaturi tehnice, recenzii, cărți electronice gratuite și oferte exclusive!

Faceți clic aici pentru a vă abona