CSS Box Shadow መፍጠሪያ
CSS Box Shadow ምንድን ነው?
የ CSS box-shadow ባህሪ በአካል ፍሬም ዙሪያ የጥላ ውጤቶችን ያስጨምራል። ጥላዎች ሊፈናቀሉ፣ ሊደበዝዙ፣ ሊሰፉ፣ ቀለም ሊሰጣቸው እና እንደ inset (ውስጣዊ ጥላ) ሊቀናጁ ይችላሉ። ብዙ በኮማ የተለዩ ጥላዎች ለሀብታም ውጤቶች ሊደራረቡ ይችላሉ። ይህ መፍጠሪያ ውስብስብ ብዙ ንብርብር ጥላዎችን በምስል እንዲገነቡ እና ዝግጁ የሆነ CSS ወደ ቅንጥብ ሰሌዳ እንዲቀዱ ያስችልዎታል።
Box Shadow መፍጠሪያን እንዴት መጠቀም እንደሚቻል
-
የ X/Y ኦፍሴት፣ ብዥታ እና ስፋት ተንሸራታቾችን ጥላውን ለማስቀመጥ እና ለማቅረብ ያስተካክሉ።
-
የጥላ ቀለም ለመምረጥ የቀለም ካሬውን ጠቅ ያድርጉ፣ ለግልጽነት የ Opacity ተንሸራታቹን ይጠቀሙ።
-
ውስጣዊ ብርሃን ወይም የተጫነ ውጤት ለመፍጠር 'Inset' ያብሩ/ያጥፉ።
-
ብዙ ጥላዎችን ለመደርደር '+ ንብርብር ጨምር' ጠቅ ያድርጉ።
-
የተፈጠረውን CSS ቅዱ እና ወደ ዘዴ ሉህዎ ይለጥፉ።
በተደጋጋሚ የሚጠየቁ ጥያቄዎች
በ box-shadow እና drop-shadow filter መካከል ያለው ልዩነት ምንድን ነው? box-shadow በአባሉት አራት ማዕዘን ወሰን ዙሪያ ጥላዎችን ይጨምራል እና ውስጣዊ ጥላዎችን ይደግፋል። CSS filter: drop-shadow() በአባሉት ምስላዊ ሁኔታ (ግልጽነት ጨምሮ) ላይ ይተገበራል ፣ ይህም PNG ያሉ ተለዋዋጭ ንጣፎች ያሉ ቅርጾችን ይከተላል።
Material Design ካርድ ከፍታ ውጤት እንዴት ነው? ሁለት box ጥላዎችን ተደምጥተው - ለስላሳ አከባቢ ጥላ (ዓላ ብርሃን ጠብታ ፣ ዝቅተኛ ግልጽነት ፣ ትንሽ ስርጁ) እና ወሳኝ ጥላ (ትንሽ ጠብታ ፣ ከፍተኛ ግልጽነት ፣ አቅጣጫ ኦፍሴት) ። ለምሳሌ: 0 2px 4px rgba(0,0,0,0.12), 0 4px 16px rgba(0,0,0,0.08).
box-shadow የገጽ አቀማመጥ ነጥብ ነው? አይ. box-shadow አባሉ መጠኑን ወይም በሰነድ ውስጥ ያለውን ቦታ አይነካም። outline በተለየ መልኩ ፣ ምንም ቦታ ይይዛል እና ሌሎች አባሉዎችን ዙሪያ አያወርድም።
box-shadow ታድዋር ይችላል? አዎ. box-shadow በCSS transitions እና animations ወሳኝ ነው። ክብረታ ስሌት ፣ box-shadow ሲቀይር ብቻ ምከባክብ - ሞбrowser GPU ሊፋጥን አይችልም box-shadow ለውጦችን transform ወይም opacity በቅደም ተከተል።
Keywords: CSS box shadow መፍጠሪያ, box-shadow CSS, CSS ጥላ መሳሪያ, CSS drop shadow, inset shadow, ብዙ ንብርብር ጥላ, CSS shadow online