सीएसएस 3

Question

यहाँ में एक फजी सीमा बनाना मेरी स्रोत छवि है:

और मेरे स्रोत छवि में ज़ूम इन किया:

कैसे केवल CSS3 के साथ यह पूरा करने पर कोई विचार ? तत्व में मामूली खून ऊपर उल्लिखित ध्यान दें।

Answer 1

सीएसएस 3 संपत्ति सीमा-त्रिज्या देखें। इसमें एक्स और वाई ऑफसेट रंग और धुंध त्रिज्या के विकल्प हैं। 4px को काम करना चाहिए तो आपके मामले में एक ग्रेश रंग ऑफसेट और धुंधला नहीं होना चाहिए।

Answer 2

आप शायद सीमा को एक हल्के रंग में सेट करने और गहरे रंग के रूपरेखा के रूप में सेट करने के साथ दूर हो सकते हैं, फिर सीमा-त्रिज्या सेट करें। नोट मैंने इसका परीक्षण नहीं किया है, और अगर स्मृति की रूपरेखा परोसता है तो सीमा-त्रिज्या के साथ वक्र नहीं होता है। यह भी ध्यान रखें कि सीमा-त्रिज्या को क्रॉस-ब्राउज़र संगत बनने के लिए सेट करने के लिए कई विशेषताओं की आवश्यकता होती है। अधिक जानकारी के लिए http://perishablepress.com/press/2008/11/24/perfect-rounded-corners-with-css/ देखें।

यदि यह विफल हो जाता है, तो आप हमेशा एक आंतरिक-div का उपयोग कर सकते हैं, जिसे आप पूर्ण, बाएं 0, दाएं 0, शीर्ष 0 और नीचे 0 पर सेट करने के लिए सेट करते हैं और फिर इसे आंतरिक या बाहरी सीमा के रूप में उपयोग करते हैं। सीमा-त्रिज्या निर्धारित करना निश्चित रूप से काम करेगा।

सादर, रिचर्ड

Answer 3

यह वास्तव में दो CSS3 box-shadow रों साथ किया जाता है।

सीएसएस:

#fuzz 
{ 
    height: 100px; 
    width: 100px; 
    border-radius: 5px; 
    border: 1px solid #333; 
    box-shadow: 0px 0px 5px #333, inset 0px 0px 2px #333; 
} 

आप कार्रवाई में इसे देख सकते हैं जब मैं वापस वास्तविक कंप्यूटर संपादित करने के लिए बेला :-) के लिए मिलता है (अब मेरी टैबलेट का उपयोग कर)

जाहिर है अपने स्वाद के लिए रंग परिवर्तन :)

Answer 4

यह सिर्फ दो बॉक्स छाया, एक इनसेट और अन्य शुरू, यानी उपयोग कर रहा है:

.box { 
    width: 100px; 
    height: 100px; 
    box-shadow: 0 3px 6px rgba(0,0,0,0.3), inset 0 -3px 3px rgba(0,0,0,0.1); 
    border: solid #ccc 1px; 
    border-radius: 10px; 
    margin: 50px 0 0 50px; 
} 

इसे यहाँ देखें: http://jsfiddle.net/WYLJv/

Answer 5

अद्यतन: मैं विक्रेता उपसर्गों हटा दिया है, के बाद से लगभग हर ब्राउज़र है कि इन गुणों का समर्थन करता है उन्हें जरूरत नहीं है। उन्हें छोड़ना इस बिंदु पर एक सर्वोत्तम अभ्यास माना जाता है।

border-radius और box-shadow के लिए Caniuse पृष्ठ देखें।

इस तरह

element { 
    box-shadow: rgba(0,0,0,0.2) 0px 2px 3px, inset rgba(0,0,0,0.2) 0px -1px 2px; 
    border-radius: 20px; 
} 

box-shadow काम करता है:

इस तरह

box-shadow: [direction (inset)] [color] [Horizontal Distance] [Vertical Distance] [size]; 

border-radius काम करता है:

यह करने के लिए सबसे अच्छा (और केवल) जिस तरह से कई बॉक्स छाया का उपयोग करने के लिए है

border-radius: [size]; 

/*or*/ 

border-radius: [topleft/bottomright size] [topright/bottomleft size]; 

/*or*/ 

border-radius: [topleft] [topright] [bottomright] [bottomleft]; 

आप ऊंचाई इस तरह की अवस्था का एक लंबाई निर्दिष्ट कर सकते हैं:

border-radius: [tl-width] [tr-width] [br-width] [bl-width]/[tl-height] [tr-height] [br-height] [bl-height]; 

Answer 6

मैं थोड़ा देर हो रही है लेकिन, हाँ, बॉर्डर की त्रिज्या और बॉक्स छाया (रों) का उपयोग करें और तुम जाना अच्छा होना चाहिए।

.block { 
    border-radius:6px; 
    box-shadow: inset 0px 0px 2px 2px #aaa, 3px 3px 5px 0px #eee; 
} 

Answer 7

अपने सीएसएस में सीमा-त्रिज्या और टेक्स्ट-छाया जोड़ने का प्रयास करें।

.box { 
    border-radius:20px; 
    text-shadow:2px 2px black; 
} 

उम्मीद है कि इससे मदद मिलती है।