CSS drop-shadow() फ़ंक्शन

रोज़े और उपयोग

CSS का drop-shadow() फ़िल्टर फ़ंक्शन छवि पर प्रकाशबिंदु प्रभाव लगाता है。

उदाहरण

उदाहरण 1

छवि को अलग-अलग प्रकाशबिंदु प्रभाव जोड़ें:

#img1 {
  filter: drop-shadow(8px 8px 10px gray);
}
#img2 {
  filter: drop-shadow(10px 10px 7px lightblue);
}

अपने आप इसे प्रयोग करें

उदाहरण 2

छवि को अलग-अलग प्रकाशबिंदु प्रभाव जोड़ें (स्थानांतरण के नकारात्मक मूल्यों का इस्तेमाल करें):

#img1 {
  filter: drop-shadow(-8px -8px 10px gray);
}
#img2 {
  filter: drop-shadow(-10px -10px 7px lightblue);
}

अपने आप इसे प्रयोग करें

CSS व्याकरण

drop-shadow(h-shadow v-shadow blur spread color)
मूल्य वर्णन
h-shadow

अनिवार्य। अनुसूचित खंड के विकल्प को पिक्सल मान दें।

नकारात्मक मूल्य छाया को छवि के बाएँ रखता है。
v-shadow

अनिवार्य। अनुसूचित खंड के विकल्प को पिक्सल मान दें।

नकारात्मक मूल्य छाया को छवि के ऊपर रखता है。
blur

वृद्धि विकल्प। छाया को धुंधलापन प्रभाव जोड़ें, इकाई पिक्सल है।

मूल्य ज्यादा बड़ा होने के साथ-साथ धुंधलापन प्रभाव ज्यादा मजबूत होता है (छाया ज्यादा बड़ा और कम होता है)。

नकारात्मक मूल्यों का इस्तेमाल नहीं किया जा सकता है。

अगर मान निर्दिष्ट नहीं किया गया है, तो मूलभूत 0 (छाया किनारा स्पष्ट) होगा。
spread

वृद्धि विकल्प। अनिवार्य एक पिक्सल मान होना चाहिए。

धनात्मक मूल्य छाया को विस्तारित करता है और बढ़ाता है, नकारात्मक मूल्य छाया को छोटा करता है।

अगर निर्दिष्ट नहीं किया गया है, तो मूलभूत 0 (छाया एलीमेंट के आकार के बराबर) होगा。
color

वृद्धि विकल्प। छाया को रंग जोड़ें。

अगर निर्दिष्ट नहीं किया गया है, रंग ब्राउज़र पर निर्भर करता है (आमतौर पर काला है)。

तकनीकी विवरण

संस्करण: CSS Filter Effects Module Level 1

ब्राउज़र समर्थन

तालिका में दिए गए नंबर इस फ़ंक्शन को पूरी तरह से समर्थन देने वाले पहले ब्राउज़र का संस्करण को प्रदर्शित करते हैं。

च्रोम एज फ़ायरफॉक्स सफारी ओपेरा
18 12 35 6 15

संबंधित पृष्ठ

संदर्भ:CSS filter गुण

संदर्भ:CSS blur() फ़ंक्शन

संदर्भ:CSS brightness() फ़ंक्शन

संदर्भ:CSS contrast() फ़ंक्शन

संदर्भ:CSS grayscale() फ़ंक्शन

संदर्भ:CSS hue-rotate() फ़ंक्शन

संदर्भ:CSS invert() फ़ंक्शन

संदर्भ:CSS opacity() फ़ंक्शन

संदर्भ:CSS saturate() फ़ंक्शन

संदर्भ:CSS sepia() फ़ंक्शन