2010-06-07 18 views
25

मुझे आंशिक रूप से गोलाकार कोनों में समस्या है। अधिकांश ब्राउज़रों के लिए पहला कामकाजी उदाहरण देखें:सीमा-त्रिज्या एचटीसी हैक और एमएसआईई वी के साथ केवल एक गोलाकार कोने कैसे प्राप्त करें: राउंड सही?

.box { 
    display: block; 
    width: 100px; 
    height: 100px; 
    border: 1px solid black; 
    background-color: yellow; 
    -moz-border-radius-bottomright: 10px; 
    -webkit-border-bottom-right-radius: 10px; 
} 

आप देख सकते हैं कि केवल नीचे दाएं कोने को गोल किया जाना चाहिए। स्वाभाविक पसंद एक सशर्त आईई बयान के अंदर एक border-radius.htc hack जोड़ने की जाएगी:

.box { 
    border-bottom-right-radius: 20px; 
    behavior:url(border-radius.htc); 
} 

यह काम नहीं कर रहा है क्योंकि border-radius.htc फ़ाइल केवल सामान्य बॉर्डर-त्रिज्या मूल्य तक पहुँच रहा है (this.currentStyle [ 'बॉर्डर-त्रिज्या'])। हैक द्वारा उपयोग किया जाने वाला वीएमएल सही है जो केवल आर्केसाइज के लिए एक प्रतिशत मान का समर्थन करता है।

तो मैं सोच रहा था कि क्या कुछ अन्य वीएमएल तत्वों का उपयोग कर समस्या के आसपास कोई अन्य तरीका है?

एक और समस्या यह है कि एचटीसी-फाइल सीमाओं का समर्थन नहीं करता है लेकिन इसे वीएमएल की स्ट्रोक विशेषता के साथ तय किया जा सकता है। उदाहरण के लिए निफ्टी कोनों कोनों के साथ अच्छी तरह से काम नहीं करता है।

उत्तर

78

मैं इसे border-radius: 0 0 10px 10px; और HTC के साथ से http://css3pie.com/

+2

महान जवाब बनाने के लिए नहीं, शायद उस खोज निकाला है चाहिए पर मेरा खुद का – Jonesopolis

+2

सीमा-त्रिज्या पर अधिक जानकारी के लिए: http://css-tricks.com/almanac/properties/b/border-radius/ – wowpatrick

+1

सही! पता नहीं क्यों यह वास्तविक जवाब के रूप में चिह्नित नहीं किया गया था! –

9

अन्य समाधान काम करने के लिए प्राप्त करने में सक्षम था: border-bottom-right-radius:10px; सीपीयू calculate अनावश्यक सीमा roundings

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