2011-04-09 4 views
45

मैं सभी चार तरफ box-shadow लागू करने की कोशिश कर रहा हूं। मैं केवल 2 पक्षों पर यह मिल सकता है:सभी चार किनारों पर बॉक्स-छाया कैसे लागू करें?

+2

CSS3please.com हमेशा इस तरह के सामान के लिए सहायक होता है ... – sscirrus

उत्तर

76

यह x और y ऑफसेट के कारण है। (बाद में साल ..)

-webkit-box-shadow: 0 0 10px #fff; 
     box-shadow: 0 0 10px #fff; 

संपादित करें: इस प्रयास करें के रूप में टिप्पणी :)

btw में अनुरोध किए गए इस सवाल का जवाब अधिक क्रॉस-ब्राउज़र,: वहाँ कई css3 जनरेटर आजकल कर रहे हैं .. css3.me, css3maker , css3generator आदि ...

+0

+1 क्योंकि आपको सही उत्तर मिल गया है, हालांकि यह एक छोटे त्रिज्या और फैल मूल्य के साथ बेहतर दिखता है। – thirtydot

+1

धन्यवाद। मैं आपके पहले जवाब और विचार को देख रहा था, कि मुझे सवाल गलत मिला :) – Damb

+0

आपको अपना उत्तर अधिक क्रॉस-ब्राउज़र बनाना चाहिए। – think123

26

देखें: http://jsfiddle.net/thirtydot/cMNX2/8/

input { 
    -webkit-box-shadow: 0 0 5px 2px #fff; 
    -moz-box-shadow: 0 0 5px 2px #fff; 
    box-shadow: 0 0 5px 2px #fff; 
} 
+0

मुझे पता है कि 3 मान + रंग के साथ बॉक्स छाया में प्रत्येक मान क्या है। यह 4 मूल्य क्या है ?? – dragonfly

+0

पढ़ें: https://developer.mozilla.org/En/CSS/Box-shadow - विशेष रूप से, यह "फैल त्रिज्या" है। – thirtydot

+0

पहेली निर्माता - एमवीपी। – Terrance00

9

यह अच्छा लग रहा है।

-moz-box-shadow: 0 0 5px #999; 
-webkit-box-shadow: 0 0 5px #999; 
box-shadow: 0 0 5px #999; 
+0

वास्तव में अच्छा है। मेरे लिए काम किया – touchchandra

2

मुझे http://css-tricks.com/forums/topic/how-to-add-shadows-on-all-4-sides-of-a-block-with-css/ साइट मिली।

.allSides 
{ 
    width:350px;height:200px; 
    border: solid 1px #555; 
    background-color: #eed; 
    box-shadow: 0 0 10px rgba(0,0,0,0.6); 
    -moz-box-shadow: 0 0 10px rgba(0,0,0,0.6); 
    -webkit-box-shadow: 0 0 10px rgba(0,0,0,0.6); 
    -o-box-shadow: 0 0 10px rgba(0,0,0,0.6); 
} 
+1

यह इस साइट के अन्य उत्तरों के रूप में उपयुक्त है, लेकिन जैसा कि आप प्रयास कर रहे हैं, मैं आपका जवाब मतदान कर रहा हूं। – blueray

+1

@AhmmadIsmail धन्यवाद – user3619130

3

बस इस कोड के रूप में सरल:

box-shadow: 0px 0px 2px 2px black; /*any color you want*/ 
0

चारों तरफ के लिए इस सीएसएस कोड का उपयोग करें: बॉक्स छाया: 0px 1px 7px 0px rgb (106, 111, 109);

संबंधित मुद्दे