सीएसएस बॉक्स छाया
CSS बॉक्स-छाया संपत्ति
CSS box-shadowगुण का उपयोग किसी तत्व पर एक या अधिक छाया लागू करने के लिए किया जाता है।
एक क्षैतिज और एक लंबवत छाया निर्दिष्ट करें
इसके सरलतम उपयोग में, आप केवल एक क्षैतिज और एक लंबवत छाया निर्दिष्ट करते हैं। छाया का डिफ़ॉल्ट रंग वर्तमान पाठ-रंग है।
उदाहरण
एक क्षैतिज और एक लंबवत छाया निर्दिष्ट करें:
div
{
box-shadow: 10px 10px;
}
छाया के लिए एक रंग निर्दिष्ट करें
colorपैरामीटर छाया के रंग को परिभाषित करता है ।
उदाहरण
छाया के लिए एक रंग निर्दिष्ट करें:
div
{
box-shadow: 10px 10px grey;
}
छाया में एक धुंधला प्रभाव जोड़ें
blurपैरामीटर धुंध त्रिज्या को परिभाषित करता है । संख्या जितनी अधिक होगी, छाया उतनी ही धुंधली होगी।
उदाहरण
छाया में धुंधला प्रभाव जोड़ें:
div
{
box-shadow: 10px 10px 5px grey;
}
छाया की स्प्रेड त्रिज्या सेट करें
spreadपैरामीटर प्रसार त्रिज्या को परिभाषित करता है । एक धनात्मक मान छाया के आकार को बढ़ाता है, एक ऋणात्मक मान छाया के आकार को घटाता है।
उदाहरण
छाया का फैलाव त्रिज्या निर्धारित करें:
div
{
box-shadow: 10px 10px 5px 12px grey;
}
इनसेट पैरामीटर सेट करें
insetपैरामीटर छाया को बाहरी छाया (शुरुआत) से आंतरिक छाया में बदलता है ।
उदाहरण
इनसेट पैरामीटर जोड़ें:
div
{
box-shadow: 10px 10px 5px grey inset;
}
एकाधिक छाया जोड़ें
एक तत्व में कई छायाएँ भी हो सकती हैं:
उदाहरण
div
{
box-shadow: 5px 5px blue, 10px 10px red, 15px 15px green;
}
पत्ते
आप box-shadowसंपत्ति का उपयोग कागज जैसे कार्ड बनाने के लिए भी कर सकते हैं:
1
1 जनवरी, 2021
हार्डेंजर, नॉर्वे
उदाहरण
div.card
{
width: 250px;
box-shadow: 0 4px 8px 0 rgba(0, 0,
0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
text-align:
center;
}
CSS Shadow Properties
The following table lists the CSS shadow properties:
| Property | Description |
|---|---|
| box-shadow | Adds one or more shadows to an element |
| text-shadow | Adds one or more shadows to a text |