CSS Box Shadow Ģenerators
Kas ir CSS Box Shadow?
CSS box-shadow īpašība pievieno ēnas efektus ap elementa rāmi. Ēnas var tikt nobīdītas, izplūdinātas, izplatītas, nokrāsotas un iestatītas kā inset (iekšēja ēna). Vairākas ar komatiem atdalītas ēnas var tikt slāņotas bagātīgiem efektiem. Šis ģenerators ļauj jums vizuāli veidot sarežģītas daudzslāņu ēnas un kopēt ielīmēšanai gatavo CSS starpliktuvē.
Kā lietot Box Shadow Ģeneratoru
-
Regulējiet Offset X/Y, Blur un Spread slīdņus ēnas pozicionēšanai un veidošanai.
-
Noklikšķiniet uz krāsas parauga ēnas krāsas izvēlei un izmantojiet Opacity slīdni caurspīdīgumam.
-
Ieslēdziet 'Inset', lai izveidotu iekšējo mirdzumu vai iespiesta efektu.
-
Noklikšķiniet uz '+ Pievienot slāni', lai sakrautu vairākas ēnas.
-
Nokopējiet ģenerēto CSS un ielīmējiet to savā stilu lapā.
Bieži uzdotie jautājumi
Kāda ir atšķirība starp box-shadow un drop-shadow filtru? box-shadow pievieno ēnas apkārt elementa taisnstūra robežu lodziņam un atbalsta ieliektas ēnas. CSS filter: drop-shadow() tiek lietots elementa vizuālajai formai (ieskaitant caurspīdību), padarot to sekojošu ne-taisnstūrveida kontūriem, piemēram, PNG ar caurspīdīgu fonu.
Kā izveidot Material Design karšu paaugstināšanas efektu? Sakrājiet divas box-shadow: mīkstu apkārtējošo ēnu (liels blur, zema necaurspīdība, nedaudz spread) un galveno ēnu (mazāks blur, augstāka necaurspīdība, virziena nobīde). Piemēram: 0 2px 4px rgba(0,0,0,0.12), 0 4px 16px rgba(0,0,0,0.08).
Vai box-shadow ietekmē lapas izkārtojumu? Nē. box-shadow neieņem elementa izmēru vai vietu dokumenta plūsmā. Atšķirībā no outline, tas neaizņem izkārtojuma vietu un nevirzīs citus elementus.
Vai es varu animēt box-shadow? Jā. box-shadow ir animējams ar CSS transitions un animations. Veiktspējai dod priekšroku box-shadow pārejai tikai kad nepieciešams - pārlūki nevar GPU paātrināt box-shadow izmaiņas tikpat efektīvi kā transform vai opacity.
Keywords: CSS box shadow ģenerators, box-shadow CSS, CSS ēnu rīks, CSS drop shadow, iekšēja ēna, daudzslāņu ēna, CSS shadow tiešsaistē