वेबकिट बॉर्डर की त्रिज्या कभी कभी प्रभाव

Question

ले यह समस्या CSS3 के बॉर्डर-त्रिज्या संपत्ति के बारे में है (http://www.css3.info/border-radius-apple-vs-mozilla/)

इस समस्या का एक उदाहरण यहाँ है:

http://jamtodaycdn.appspot.com/bin/rounded.html

इस URL में, मैं गोल है divs जो FF3 में गोलाकार दिखाई देते हैं, लेकिन सफारी और क्रोम पर गोलाकार कोनों वहां नहीं हैं।

-moz-border-radius-bottomleft:2px; 
-moz-border-radius-bottomright:92px; 
-moz-border-radius-topleft:92px; 
-moz-border-radius-topright:2px; 
-webkit-border-bottom-left-radius: 2px; 
-webkit-border-bottom-right-radius: 92px; 
-webkit-border-top-left-radius: 92px; 
-webkit-border-top-right-radius: 2px; 

मैं काफी यकीन है कि यह सीएसएस सही स्वरूप में हूँ, इसलिए मैं समस्या क्या है के रूप में पता कर रहा हूँ:

शैली इस प्रकार है।

Answer 1

समस्या 92px radia में प्रतीत होती है। यह अधिकतम त्रिज्या की तरह दिखता है कि 20-पिक्सेल-उच्च div संभाल सकता है 18px है। यह जरूरी नहीं है कि उस मामले में 92 पिक्सेल त्रिज्या का मतलब क्या है। हालांकि, अगर आप दोनों एक एक्स और वाई त्रिज्या कुछ इस तरह का उपयोग कर निर्दिष्ट कर सकते हैं:।

-webkit-border-bottom-right-radius: 92px 18px; 

(ओर ध्यान दें, यदि आप एकाधिक HTML तत्वों के लिए एक ही आईडी का उपयोग नहीं करना चाहिए आप वर्ग के बजाय का उपयोग करना चाहिए, और अपने सीएसएस समायोजित चयनकर्ता तो यह कहता है। #round के बजाय।)

Answer 2

क्या आपको सीमा या सीमा-चौड़ाई संपत्ति के साथ-साथ विभिन्न सीमा-त्रिज्या गुणों को लागू करने की आवश्यकता नहीं है?

इसके अलावा, मैंने देखा है कि सफारी कुछ त्रिज्या मूल्यों के ऊपर त्रिज्या को छोड़ रहा है - पिक्सेल मानों को कम करने का प्रयास करें & देखें कि क्या होता है।

Answer 3

किसी के लिए गोलाकार कोनों में मदद के लिए इसका जिक्र करने के लिए, मैं वेबकिट के बारे में जैकब के जवाब से सहमत हूं, लेकिन सवाल यह भी बताता है कि क्रोम काम नहीं कर रहा है। क्रोम मानक CSS3 गोलाकार कोनों का उपयोग करता है जो बिल्कुल वेबकिट की तरह हैं, लेकिन नियम के पहले '-webkit-' के बिना। ये इस प्रकार हैं:

border-bottom-right-radius:2px; 

खाता फ़ायरफ़ॉक्स, वेबकिट और क्रोम में लेने के लिए आपको कुछ इस तरह करने की ज़रूरत होगी:

-moz-border-radius-topright:3px; 
-moz-border-radius-bottomright:3px; 
-webkit-border-top-right-radius:3px; 
-webkit-border-bottom-right-radius:3px; 
border-top-right-radius:3px; 
border-bottom-right-radius:3px; 

नियमों के तीसरे सेट CSS3 के नियम हैं और समर्थन कर रहे क्रोम द्वारा यह एक अच्छा तरीका भी CSS3Pie की तरह कुछ का उपयोग कर IE में गोलाकार कोनों प्राप्त करने के लिए है: http://css3pie.com/

Answer 4

सरल प्रकार बस का उपयोग करें:

border-radius:92px 92px 2px 2px;

जहां:

border-radius:top right bottom left;

पैरा एक के बारे में