सीएसएस और सीमाओं

Question

यह संभव सीएसएस में यह करने के लिए है:

Answer 1

नहीं वास्तव में आपके सवाल का जवाब है, लेकिन में होने की अगर आप (यह करने के लिए की जरूरत है और की जरूरत नहीं है सीएसएस), मुझे लगता है कि आपके पास पहले से ही किसी अन्य प्रोग्राम में बनाया गया है, इसलिए आपको यह उपयोगी मिल सकता है: a farewell to css3 gradients

Answer 2

मुझे लगता है कि यह radial gradient वाले दो divs के साथ संपर्क किया जा सकता है। ग्रेडियेंट के साथ tool to experiment यहां है। यह विक्रेता-विशिष्ट कोड भी प्रदान करता है।

Answer 3

यहाँ मेरी 2 सेंट है:

HTML:

<div class="upperDiv"></div> 
<div class="lowerDiv"></div> 

सीएसएस:

.upperDiv { 
width:500px; 
height: 40px; 

background-image: -ms-radial-gradient(center bottom, ellipse farthest-corner, #E4E4E4 0%, #FDFDFD 150%); 
background-image: -moz-radial-gradient(center bottom, ellipse farthest-corner, #E4E4E4 0%, #FDFDFD 150%); 
background-image: -o-radial-gradient(center bottom, ellipse farthest-corner, #E4E4E4 0%, #FDFDFD 150%); 
background-image: -webkit-gradient(radial, center bottom, 0, center bottom, 567, color-stop(0, #E4E4E4), color-stop(1.5, #FDFDFD)); 
background-image: -webkit-radial-gradient(center bottom, ellipse farthest-corner, #E4E4E4 0%, #FDFDFD 150%); 
background-image: radial-gradient(center bottom, ellipse farthest-corner, #E4E4E4 0%, #FDFDFD 150%); 

} 

.lowerDiv { 
width:500px; 
height: 40px; 

background-image: -ms-radial-gradient(center top, ellipse farthest-corner, #FDFDFD 0%, #F0F0F0 80%); 
background-image: -moz-radial-gradient(center top, ellipse farthest-corner, #FDFDFD 0%, #F0F0F0 80%); 
background-image: -o-radial-gradient(center top, ellipse farthest-corner, #FDFDFD 0%, #F0F0F0 80%); 
background-image: -webkit-gradient(radial, center top, 0, center top, 567, color-stop(0, #FDFDFD), color-stop(0.8, #F0F0F0)); 
background-image: -webkit-radial-gradient(center top, ellipse farthest-corner, #FDFDFD 0%, #F0F0F0 80%); 
background-image: radial-gradient(center top, ellipse farthest-corner, #FDFDFD 0%, #F0F0F0 80%); 
} 

चौड़ाई और ऊंचाई रहे हैं वहाँ सिर्फ इतना है कि आप कुछ देख सकते हैं। मुझे लगता है कि यह ज्यादातर आधुनिक ब्राउज़रों पर काम करेगा (हालांकि यह थोड़ा वर्बोज़ है)

Answer 4

यहां कुछ ऐसा है जो मैंने एक साथ रखा है। यदि आप चाहें तो आप इसके साथ कुछ गड़बड़ कर सकते हैं।

http://jsfiddle.net/Gk6xJ/

Answer 5

मुझे किसी साइट पर कुछ इसी तरह कर रहा हूँ:

width: 60%; height: 20px; background-image: -moz-radial-gradient(center top , ellipse farthest-side, rgba(100, 100, 100, 0.5), rgba(100, 100, 100, 0) 75%), -moz-radial-gradient(center top , ellipse farthest-side, rgba(200, 200, 200, 0.5), rgba(200, 200, 200, 0)), -moz-radial-gradient(center top , ellipse farthest-side, rgba(200, 200, 200, 0.3), rgba(200, 200, 200, 0)); background-repeat: no-repeat; background-size: 100% 5px, 100% 10px, 100% 15%;