CSS => डब्बे की छाया

वाक्य - विन्यास

बॉक्स-छाया: कोई नहीं | एच-छाया वी-छाया कलंक फैल रंग | इनसेट | प्रारंभिक | विरासत |

पैरामीटर

पैरामीटर	विवरण
इनसेट	डिफ़ॉल्ट रूप से, छाया को ड्रॉप छाया के रूप में माना जाता है। इनसेट कीवर्ड फ्रेम / बॉर्डर के अंदर छाया खींचता है।
ऑफसेट-x	क्षैतिज दूरी
ऑफसेट-y	ऊर्ध्वाधर दूरी
कलंक-त्रिज्या	डिफ़ॉल्ट रूप से 0। मूल्य नकारात्मक नहीं हो सकता। बड़ा मूल्य, बड़ा और हल्का छाया बन जाता है।
प्रसार-त्रिज्या	डिफ़ॉल्ट रूप से 0। सकारात्मक मूल्यों के कारण छाया का विस्तार होगा। नकारात्मक मूल्यों के कारण छाया सिकुड़ जाएगी।
रंग	विभिन्न `hsla()` हो सकते हैं: एक रंग कीवर्ड, हेक्साडेसिमल, `rgb()` , `rgba()` `hsl()` , `hsla()` , `hsla()`

टिप्पणियों

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

क्रोम 10.0
IE 9.0
फ़ायरफ़ॉक्स 4.0 3.5 -moz
सफारी 5.1 3.1 -बेटक-
ओपेरा 10.5

परछाई डालना

JSFiddle: https://jsfiddle.net/UnsungHero97/80qod7aL/

एचटीएमएल

<div class="box_shadow"></div>

सीएसएस

.box_shadow {
  -webkit-box-shadow: 0px 0px 10px -1px #444444;
     -moz-box-shadow: 0px 0px 10px -1px #444444;
          box-shadow: 0px 0px 10px -1px #444444;
}

भीतर की छाया

एचटीएमएल

<div class="box_shadow"></div>

सीएसएस

.box_shadow {
  background-color: #1C90F3;
  width: 200px;
  height: 100px;
  margin: 50px;
  -webkit-box-shadow: inset 0px 0px 10px 0px #444444;
     -moz-box-shadow: inset 0px 0px 10px 0px #444444;
          box-shadow: inset 0px 0px 10px 0px #444444;
}

परिणाम:

JSFiddle: https://jsfiddle.net/UnsungHero97/80qod7aL/1/

एक छद्म तत्व का उपयोग करके केवल-केवल ड्रॉप शैडो

JSFiddle: https://jsfiddle.net/UnsungHero97/80qod7aL/2/

एचटीएमएल

<div class="box_shadow"></div>

सीएसएस

.box_shadow {
  background-color: #1C90F3;
  width: 200px;
  height: 100px;
  margin: 50px;
}

.box_shadow:after {
  content: "";
  width: 190px;
  height: 1px;
  margin-top: 98px;
  margin-left: 5px;
  display: block;
  position: absolute;
  z-index: -1;
  -webkit-box-shadow: 0px 0px 8px 2px #444444;
     -moz-box-shadow: 0px 0px 8px 2px #444444;
          box-shadow: 0px 0px 8px 2px #444444;
}

कई छाया

JSFiddle: https://jsfiddle.net/UnsungHero97/80qod7aL/5/

एचटीएमएल

<div class="box_shadow"></div>

सीएसएस

.box_shadow {
  width: 100px;
  height: 100px;
  margin: 100px;
  box-shadow:
    -52px -52px 0px 0px #f65314,
    52px -52px 0px 0px #7cbb00,
    -52px 52px 0px 0px #00a1f1,
    52px 52px 0px 0px #ffbb00;
}

Modified text is an extract of the original Stack Overflow Documentation

के तहत लाइसेंस प्राप्त है CC BY-SA 3.0

से संबद्ध नहीं है Stack Overflow

CSS
डब्बे की छाया

खोज…

वाक्य - विन्यास

पैरामीटर

टिप्पणियों

परछाई डालना

भीतर की छाया

एक छद्म तत्व का उपयोग करके केवल-केवल ड्रॉप शैडो

कई छाया