CSS बॉक्स-छाया संपत्ति
उदाहरण
विभिन्न <div> तत्वों में छाया जोड़ें:
#example1 {
box-shadow: 5px 10px;
}
#example2 {
box-shadow:
5px 10px #888888;
}
नीचे और अधिक "इसे स्वयं आज़माएं" उदाहरण।
परिभाषा और उपयोग
box-shadow
गुण एक या एक से अधिक छाया को एक तत्व से जोड़ता है ।
डिफ़ॉल्ट मान: | कोई नहीं |
---|---|
विरासत में मिला: | नहीं |
एनिमेटेबल: | हां। एनिमेटेबल के बारे में पढ़ें |
संस्करण: | CSS3 |
जावास्क्रिप्ट सिंटैक्स: | ऑब्जेक्ट .style.boxShadow="10px 20px 30px नीला" |
ब्राउज़र समर्थन
तालिका में संख्याएं पहले ब्राउज़र संस्करण को निर्दिष्ट करती हैं जो पूरी तरह से संपत्ति का समर्थन करता है।
-वेबकिट- या -मोज़ के बाद की संख्याएं- पहले संस्करण को निर्दिष्ट करें जो उपसर्ग के साथ काम करता है।
Property | |||||
---|---|---|---|---|---|
box-shadow | 10.0 4.0 -webkit- |
9.0 | 4.0 3.5 -moz- |
5.1 3.1 -webkit- |
10.5 |
सीएसएस सिंटेक्स
box-shadow: none|h-offset v-offset blur spread color |inset|initial|inherit;
नोट: किसी तत्व में एक से अधिक छाया जोड़ने के लिए, छाया की अल्पविराम से अलग की गई सूची जोड़ें (नीचे "इसे स्वयं आज़माएं" उदाहरण देखें)।
सम्पत्ति की कीमत
Value | Description | Play it |
---|---|---|
none | Default value. No shadow is displayed | |
h-offset | Required. The horizontal offset of the shadow. A positive value puts the shadow on the right side of the box, a negative value puts the shadow on the left side of the box | |
v-offset | Required. The vertical offset of the shadow. A positive value puts the shadow below the box, a negative value puts the shadow above the box | |
blur | Optional. The blur radius. The higher the number, the more blurred the shadow will be | |
spread | Optional. The spread radius. A positive value increases the size of the shadow, a negative value decreases the size of the shadow | |
color | Optional. The color of the shadow. The default value is the text color. Look at CSS Color Values for a complete list of possible color values. Note: In Safari (on PC) the color parameter is required. If you do not specify the color, the shadow is not displayed at all. |
|
inset | Optional. Changes the shadow from an outer shadow (outset) to an inner shadow | |
initial | Sets this property to its default value. Read about initial | |
inherit | Inherits this property from its parent element. Read about inherit |
युक्ति: अनुमत मानों के बारे में और पढ़ें (सीएसएस लंबाई इकाइयां)
और ज्यादा उदाहरण
उदाहरण
छाया में धुंधला प्रभाव जोड़ें:
#example1 {
box-shadow: 10px 10px 8px #888888;
}
उदाहरण
छाया के प्रसार त्रिज्या को परिभाषित करें:
#example1 {
box-shadow: 10px 10px 8px 10px #888888;
}
उदाहरण
एकाधिक छाया परिभाषित करें:
#example1 {
box-shadow: 5px 5px blue, 10px 10px
red, 15px 15px green;
}
उदाहरण
इनसेट कीवर्ड जोड़ें:
#example1 {
box-shadow: 5px 10px inset;
}
उदाहरण
मेज पर फेंके गए चित्र। यह उदाहरण दर्शाता है कि "पोलेरॉइड" चित्र कैसे बनाएं और चित्रों को कैसे घुमाएं:
div.polaroid {
width: 284px;
padding: 10px 10px 20px 10px;
border: 1px solid
#BFBFBF;
background-color: white;
box-shadow: 10px 10px 5px #aaaaaa;
}
संबंधित पृष्ठ
सीएसएस ट्यूटोरियल: सीएसएस बॉक्स छाया
एचटीएमएल डोम संदर्भ: बॉक्सशैडो संपत्ति