Turinys
Tai yra viena iš labiausiai laukiamų naujojo standarto savybių CSS3 ir tai kartu su HTML5 sugeba pritraukti daug išvaizdos, vadiname Dėžutės šešėlis kuris leidžia mums uždėti šešėlius ant mūsų dokumento laukelių HTML, taip sukuriant efektą, tarsi jis plauktų puslapyje.„Box Shadow“ elementas turi būti sudarytas taip:
„box-shadow“: „hoffset voffset“ suliejimo išplitimo spalvos įterpimas
Kai kiekvienas jo atributas atlieka tam tikrą funkciją, pažiūrėkime kiekvieną iš jų išsamiai:
- Hoffsetas: Tai horizontalus poslinkis, kuris yra ilgio reikšmė. Teigiama vertė išstumia Dėžutės šešėlis kita vertus, neigiama vertė „Box Shadow“ perkelia į kairę.
- Atstumas: Tai vertikalus poslinkis, kuris yra ilgio vertė. Teigiama reikšmė perkelia „Box Shadow“ žemiau elemento dėžutės, o neigiama vertė - „Box Shadow“ virš elemento dėžutės.
- Suliejimas: (Pasirenkama) Nurodo šešėlio apibrėžimo spindulį, kuris yra ilgio reikšmė. Kuo didesnė vertė, tuo neryškesnis lieka prekės dėžutės kraštas. Jei numatytoji reikšmė yra 0, langelio šešėlio kraštas atrodo visiškai apibrėžtas.
- Plisti: (Neprivaloma) Nurodykite šešėlio sklaidos spindulį, tai yra ilgio matas. Teigiama reikšmė sukelia šešėlio plėtimąsi visomis elemento dėžutės kryptimis, o neigiama vertė sukelia elemento šešėlio susitraukimą.
- Spalva: (Neprivaloma) Tai šešėlio spalva. Jei jis praleistas, naršyklė nuspręs spalvą.
- Įterpimas: (Neprivaloma) Padaro šešėlį metamo elemento, kuriam jis taikomas, dėžutės viduje.
Kai žinosime atributus, greitai pereikime prie kodo pavyzdžio, kad pritaikytume tai, ką išmokome.
PavyzdysYra daug įvairių vaisių - vien tik bananų yra daugiau nei 500 veislių. Kai pridėsime daugybę obuolių, apelsinų ir kitų gerai žinomų vaisių rūšių, susidursime su tūkstančiais pasirinkimų.
Kaip matome, galime taikyti Dėžutės šešėlis CSS stiliaus žymos viduje šis kodas sukuria tokį rezultatą:
PavyzdysYra daug įvairių vaisių - vien tik bananų yra daugiau nei 500 veislių. Kai pridėsime daugybę obuolių, apelsinų ir kitų gerai žinomų vaisių rūšių, susidursime su tūkstančiais pasirinkimų.
Dabar pažiūrėkime, kaip abu šešėliai rodomi mūsų elemente:
