IE9 सीमा-त्रिज्या और पृष्ठभूमि ढाल रक्तस्राव

Question

IE9 जाहिरा तौर पर CSS3 की मानक परिभाषा का उपयोग करके गोल कोनों को संभालने में सक्षम है border-radius।

सीमा त्रिज्या और पृष्ठभूमि ढाल के लिए समर्थन के बारे में क्या ? हां IE9 उन दोनों को अलग-अलग समर्थन करने के लिए है, लेकिन अगर आप गोल कोने से बाहर दो ढाल वाले मिश्रणों को मिलाते हैं।

गोल-गोल कोनों के साथ एक बॉक्स के नीचे एक ठोस काली रेखा के रूप में दिखाई देने वाली छाया के साथ मैं अजनबीपन भी देख रहा हूं।

यहाँ IE9 में दिखाए गए चित्र हैं:

मैं इस समस्या को कैसे हल करूं?

Comments

इस सुझाव के लिए धन्यवाद @MikeP और @meanstreakuk। मुझे लगता है कि जवाब मैं देख रहा हूँ की लाइनों के साथ और अधिक है जब IE वास्तव में ग्रेडिएंट / गोलाई का समर्थन करेगा या मैं दोनों को एक साथ कैसे काम कर सकता हूं।

— सिग्माबेटटूट

2 को एक साथ काम करने के तरीके के लिए आपके पास @meanstreak का जवाब है। यदि आप यथार्थवादी होना चाहते हैं, तो पृष्ठभूमि छवियों के रूप में एसवीजी ग्रेडिएंट्स को सीएसएस ग्रेडिएटर्स (जो अभी भी भारी विकास / चर्चा के अधीन हैं) की तुलना में बहुत जल्द सभी ब्राउज़रों द्वारा पूरी तरह से समर्थित होने की संभावना है।

— केविन पेनो

अविश्वसनीय एमएस अब तक बहुत पीछे है। यह 2011 है और IE अभी भी इस तरह के मुद्दों से निपट रहा है। Zzzzzzz। .. उनकी साइट पर वे कहते हैं: "उपवास अब सुंदर है"। यकीन से यही है। ऊपर पोस्ट की गई तस्वीरों पर एक नज़र डालें। एक व्यवहारिक सौंदर्य क्या है!

— १६:५१ पर सनीरेड

सनीरेड, ठीक है, क्रोम तत्वों में गोल कोनों के साथ कुछ में समाहित कोनों के ऊपर से खून बह रहा है। वास्तव में, यह 2012 है और ब्राउज़र अभी भी इस तरह के मुद्दों के साथ काम कर रहे हैं :-)

— जॉय

@SunnyRed यह अब 2013 और बग अभी भी है :(

— स्लीक

Answer 1

यहां एक समाधान है जो एक पृष्ठभूमि ढाल को जोड़ता है, एक अर्ध-पारदर्शी छवि बनाने के लिए डेटा यूआरआई का उपयोग करके जो किसी भी पृष्ठभूमि रंग को ओवरलैप करता है। मैंने सत्यापित किया है कि यह IE9 में सीमा त्रिज्या से सही ढंग से जुड़ा हुआ है। यह एसवीजी-आधारित प्रस्तावों की तुलना में हल्का है, लेकिन नकारात्मक पक्ष के रूप में, संकल्प-स्वतंत्र नहीं है। एक और लाभ: आपके वर्तमान HTML / CSS के साथ काम करता है और अतिरिक्त तत्वों के साथ रैपिंग की आवश्यकता नहीं होती है।

मैंने वेब खोज के माध्यम से एक यादृच्छिक 20x20 ग्रेडिएंट पीएनजी को पकड़ा, और इसे एक ऑनलाइन टूल का उपयोग करके डेटा यूआरआई में परिवर्तित किया। परिणामी डेटा URI उन सभी के लिए CSS कोड से छोटा है, जो SVG में गड़बड़ी करते हैं, स्वयं SVG से बहुत कम! (आप केवल सशर्त शैलियों, ब्राउज़र-विशिष्ट सीएसएस कक्षाओं आदि का उपयोग करके IE9 के लिए यह सशर्त रूप से लागू कर सकते हैं) बेशक, पीएनजी उत्पन्न करना बटन-आकार के ग्रेडिएंट के लिए बहुत अच्छा काम करता है, लेकिन पृष्ठ-आकार के ग्रेडिएंट नहीं!

HTML:

<span class="button">This is a button</span>

सीएसएस:

span.button { 
  padding: 5px 10px;
  border-radius: 10px;
  background-color: orange;  
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAvUlEQVQ4y63VMQrDMAyF4d/BGJ+rhA4dOnTo0Kn3P4ExxnSoXVQhpx0kEMmSjyfiKAF4AhVoqrvqjXdtoqPoBMQAPAZwhMpaYkAKwH1gFtgG0v9IlyZ4E2BVabtKeZhuglegKKyqsWXFVboJXgZQfqSUCZOFATkAZwEVY/ymQAtKQJ4Jd4VZqARnuqyxmXAfiAQtFJEuG9dPwtMC0zD6YXH/ldAddB/Z/aW4Hxv3g+3+6bkvB/f15b5gXX8BL0z+tEEtuNA8AAAAAElFTkSuQmCC);
  background-size: 100% 100%;

  border: 2px solid white;
  color: white;
}

Comments

और विजेता है ... मुझे लगता है कि अगर मुझे यह चुनना है तो यह है। मैं उम्मीद कर रहा था कि जब IE वास्तव में इसका समर्थन करता है तो इसके लिए अधिक जानकारी देखने की उम्मीद है। पृष्ठभूमि छवि समाधान के लिए, मैं IE व्यवहार करने के लिए छवियों में नहीं खींचने के लिए आंशिक हूँ। सभी को उनके उपयोगी सुझाव के लिए धन्यवाद।

— सिग्माबेटट्यूट

मैंने पाया कि सेटिंग background-size: 100% 103%; background-position:center;बेहतर है। दोनों मूल्यों के लिए 100% ऊपर और नीचे कुछ अजीब सीमा जोड़ता है।

— मोर्टेन क्रिस्टियनजेन

पृष्ठभूमि का आकार जोड़ना: 100% 103%; पृष्ठभूमि स्थिति: केंद्र; मेरे लिए कुछ नहीं करता है।

— ग्रेगरी बोल्केनस्टीजन

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

— डेको

उनका मैनुअल डेटा यूआरआई है जो कुछ सीएसएस प्रीप्रोसेसर सामान्य रूप से तैनाती के समय करते हैं। के रूप में "लेकिन किस तरह की बदसूरत हैक है", यह एक कार्डिनल बकवास है। एसवीजी किसी भी अन्य के रूप में छवि है, हालांकि एक वेक्टर एक। इसलिए SVG को हैक कहना, और इसके बजाय PNG का प्रस्ताव करना पूर्णतः गैर-समझदारी है। एसवीजी बेहतर क्यों है? रिज़ॉल्यूशन इंडिपेंडेंस, वही कारण जो आप rasterized इमेज बैकग्राउंड के बजाय बॉर्डर-रेडियस का उपयोग करते हैं।

— स्कॉर्ट

Answer 2

मैं भी इस समस्या के साथ काम कर रहा हूं। एक और "समाधान" उस आइटम के चारों ओर एक div जोड़ना है जिसमें ढाल और गोल कोनों हैं। उस div को समान ऊँचाई, चौड़ाई और गोल कोने वाले मान बना लें। छिपा हुआ करने के लिए अतिप्रवाह सेट करें। यह मूल रूप से सिर्फ एक मुखौटा है, लेकिन यह मेरे लिए काम करता है।

HTML:

<div class="mask roundedCorners">
    <div class="roundedCorners gradient">
        Content
    </div>
</div>

सीएसएस:

.mask
{
    overflow: hidden;
}

.roundedCorners
{
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
}

.gradient
{
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0065a4', endColorstr='#a0cf67',GradientType=0 ); /* IE6-9 */
}

Comments

यह मेरे लिए पूरी तरह से काम करता है और अन्य प्रस्तावित समाधानों की तुलना में बहुत सरल है।

— सिमोन पी स्टीवंस

वर्तमान में स्वीकृत उत्तर की तुलना में बहुत आसान है। यह मेरे लिए IE9 में काम करता है।

— एंडी मैक्लोडन

यह काम करता है ... इतना दुखद और दयनीय। यह 'HTML5' ब्राउज़र है !? मैं IE10 को लेकर उत्साहित क्यों नहीं हूं।

— टॉड वंस

@toddv चिंता मत करो। यह सब जल्द ही खत्म हो जाएगा। जल्द ही नहीं, लेकिन जल्द ही। देखें daringfireball.net/linked/2012/07/04/windows-hegasion किसी भी भाग्य के साथ, किसी को भी IE12 का समर्थन करने के बारे में चिंता करने की ज़रूरत नहीं होगी ... शायद IE14 - यह फ़ज़ी है।

— जिंगलथूला

बस एक छोटी सी बात है, लेकिन फॉरवर्ड संगतता को बढ़ावा देने के लिए आपकी सीमा त्रिज्या के बयानों को उलट दिया जाना चाहिए। मैंने एडिट किया।

— पैरिस

Answer 3

मुझे लगता है कि यह ध्यान देने योग्य है कि कई मामलों में आप ढाल प्रभाव को "नकली" करने के लिए इनसेट बॉक्स-शैडो का उपयोग कर सकते हैं और IE9 में बदसूरत किनारों से बच सकते हैं। यह विशेष रूप से बटन के साथ अच्छी तरह से काम करता है।

इस उदाहरण को देखें: http://jsfiddle.net/jancbeck/CJPPW/31/

Comments

मेरे मामले में उत्कृष्ट सुधार है क्योंकि मैंने केवल एक बटन पर इसका उपयोग किया है और आपको आकर्षित करने की तरह एक ढाल की आवश्यकता है। मैंने अब के लिए gte IE9 के लिए सशर्त टिप्पणियों का उपयोग किया और फिर लागू कियाbox-shadow: inset 0 -8px 10px rgba(0,0,0,0.15), 0 1px 0 rgba(255,255,255, 0.3), inset 0 1px 0 rgba(255,255,255, 0.3);

— Volomike

सुरुचिपूर्ण और सरल। मैं ++।

— एलिरन मलका

बॉक्स के बाहर सोचने के लिए +1। टैब के साथ-साथ बटनों के लिए भी अच्छी तरह से काम करता है। इनसेट का उपयोग करने से तत्व के अंदर ढाल बनी रहती है।

— ग्लेनगॉव

यह सबसे अच्छा समाधान है जो मैंने देखा है। शुद्ध सीएसएस, अतिरिक्त तत्वों, या छवियों की आवश्यकता नहीं है।

— ज़ाक्ज़

अच्छी चाल है, लेकिन मैं सभी साइट पर gradients है। मैं उन सभी को बेवकूफ के लिए नहीं बदल सकता।

— मेहमत फातिह यलिदज़

Answer 4

आप इस समस्या को हल करने के लिए CSS3 PIE का उपयोग कर सकते हैं:

http://css3pie.com/

बेशक, यह ओवरकिल हो सकता है यदि आप केवल गोल कोने और एक पृष्ठभूमि ढाल के साथ एक तत्व पर निर्भर हैं, लेकिन यह विचार करने का एक विकल्प है कि क्या आप अपने पृष्ठों पर कई सामान्य CSS3 सुविधाओं को शामिल कर रहे हैं और आसान समर्थन चाहते हैं IE6 + के लिए

Comments

यहां तक ​​कि css3pie और ie9 के साथ, मैं ढाल नहीं देखता हूं। मैं गोल कोनों और ड्रॉप शैडो को देखता हूं, लेकिन कोई ढाल नहीं।

— केविन

Answer 5

मैं इस बग में भाग गया। मेरा सुझाव है कि ढाल में9 के लिए एक दोहराया पृष्ठभूमि छवि का उपयोग करना होगा। IE9 गोल सीमाओं (RC1 के रूप में) के पीछे की छवि को सही ढंग से टाइल करता है।

मैं यह देखने में विफल हूं कि सीएसएस की 1 पंक्ति को बदलने के लिए कोड की 100 पंक्तियों को कैसे लिखना सरल या सुरुचिपूर्ण है। एसवीजी शांत और सभी है, लेकिन सभी के माध्यम से क्यों जाना जाता है जब ग्रेडिएंट बैकग्राउंड के लिए आसान समाधान वर्षों से आसपास रहे हैं।

Answer 6

मैं भी एक ही समस्या में फंस गया n पाया गया कि IE एक समय में सीमा त्रिज्या और ग्रेडिएंट दोनों को प्रस्तुत नहीं कर सकता है, यह दोनों संघर्ष करता है, इस सिरदर्द को हल करने का एकमात्र तरीका फ़िल्टर को हटाने और svg कोड के माध्यम से ग्रेडिएंट का उपयोग करना है, सिर्फ IE के लिए ..

आप Microsoft से इस स्थान (विशेष रूप से svg के ग्रेडिएंट के लिए बनाया गया) से उनके ग्रेडिएंट कलर कोड का उपयोग करके svg कोड प्राप्त कर सकते हैं:

http://ie.microsoft.com/testdrive/graphics/svggradientbackgroundmaker/default.html

का आनंद लें :)

Comments

लिंक अब मान्य नहीं है।

— क्रश करें

Answer 7

IE9 के लिए त्रिज्या क्लिप करने के लिए बस एक रैपर div (गोल और अतिप्रवाह छिपा हुआ) का उपयोग करें। सरल, क्रॉस-ब्राउज़र काम करता है। एसवीजी, जेएस, और सशर्त टिप्पणियां अनावश्यक हैं।

<div class="ie9roundedgradient"><div class="roundedgradient">text or whatever</div></div>

.ie9roundedgradient { 
display:inline-block; overflow:hidden; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; 
}
.roundedgradient { 
-webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; 
/* use colorzilla to generate your cross-browser gradients */ 
}

Answer 8

इस ब्लॉग पोस्टिंग ने मेरी मदद की: http://abouthalf.com/2010/10/25/internet-explorer-9-gradients-with-rounded-corners/

मूल रूप से, आप फ़िल्टर को हटाने के लिए एक सशर्त टिप्पणी का उपयोग करते हैं और फिर ग्रेडिएंट्स का SVG 'स्प्राइट्स' बनाते हैं जिसे आप बैकग्राउंड इमेज के रूप में उपयोग कर सकते हैं।

सरल और सुरुचिपूर्ण!

Comments

मैं यही रहता हूं। विशेष रूप से मुझे एसवीजी का उपयोग करके स्प्राइट बनाने के लिए अपनी खोज को अंतिम रूप से समाप्त करने में मेरी मदद करने के लिए बड़े अप। चूंकि एसवीजी स्केलेबल है, और स्प्राइट्स संभव हैं, मुझे लगता है कि एसवीजी स्प्राइट पैक सीएसएस ग्रेडिएंट्स की तुलना में कहीं अधिक वर्सेटाइल हैं और, जैसा कि मैंने ऊपर कहा था, संभवतः सीएसएस ग्रेडिएंट्स से बहुत पहले ब्राउज़रों में 100% समर्थन दिखाई देगा।

— केविन पेनो

ओह, केवल एक चीज जो मैं इसमें जोड़ूंगा, वह यह है कि वर्तमान में वेबकिट और, मेरा मानना ​​है कि, ओपेरा सीएसएस छवि url()कॉल में भी एसवीजी का समर्थन करता है। इस प्रकार, केवल एक बायाँ भाग बाहर है, इस प्रकार, 1000 सशर्त छोड़ें और एसवीजी की सेवा करें जो इसे समर्थन करते हैं। बाकी सभी लोगों के लिए, एक रोस्टेड छवि परोसें। फिर यह हैक मैनेज हो जाता है।

— केविन पेनो

Answer 9

IE9 सीमा-त्रिज्या और ग्रेडिएंट को एक साथ ठीक से संभालता है। समस्या यह है कि IE9 ढाल के अलावा फिल्टर को उचित रूप से प्रस्तुत करता है। इसे ठीक से हल करने का तरीका शैली की घोषणाओं पर फ़िल्टर को अक्षम करना है जो फ़िल्टर संपत्ति का उपयोग करते हैं।

इसे हल करने के तरीके पर एक उदाहरण के रूप में:

आपके मुख्य स्टाइलशीट में एक बटन वर्ग है।

.btn {
    background: linear-gradient(to bottom,  #1e5799 0%,#7db9e8 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 );
}

एक सशर्त IE9 स्टाइलशीट में:

.btn { filter: none; }

जब तक आपके मुख्य स्टाइलशीट के बाद IE9 स्टाइलशीट को आपके सिर में संदर्भित किया जाता है यह पूरी तरह से काम करेगा।

Comments

ie9 रैखिक ढ़ाल प्रस्तुत नहीं करता है

— जेम्स वेस्टगेट

Answer 10

IE9 के तहत काम करने का एक सरल तरीका है कि केवल एक तत्व के साथ।

इस बेला पर एक नज़र डालें: http://jsfiddle.net/bhaBJ/6/

पहला तत्व बॉर्डर-रेडियस सेट करता है। दूसरा छद्म-तत्व पृष्ठभूमि ग्रेडिएंट सेट करता है।

कुछ मुख्य निर्देश:

• माता-पिता के सापेक्ष या पूर्ण स्थिति होनी चाहिए
• माता-पिता को अतिप्रवाह होना चाहिए : छिपा हुआ ; (दिखने में सीमा-त्रिज्या प्रभाव के लिए)
• :: पहले (या :: बाद में) छद्म तत्व का z- इंडेक्स होना चाहिए : -1 (वर्कअराउंड प्रकार)

आधार तत्व घोषणा कुछ इस प्रकार है:

.button{
    position: relative;
    overflow: hidden;        /*make childs not to overflow the parent*/

    border-radius: 5px;      /*don't forget to make it cross-browser*/

    z-index:2;               /*just to be sure*/
}

छद्म तत्व घोषणा:

.button:before{

    content: " ";                     /*make it a node*/
    display: block;     

    position: absolute;               
    top:0;left:0;bottom:0;right:0;    /*same width and height as parent*/

    z-index: -1;                      /*force it to NOT overlay the TEXT node*/

    /*GRADIENT declarations...*/
    background: -ms-linear-gradient(top,  #ff3232 0%,#7db9e8 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff3232',endColorstr='#7db9e8',GradientType=0 );

}

Comments

बिलकुल उत्तम! धन्यवाद! :)

— माजिमेकुन

मैंने सीमा-त्रिज्या को आपके उदाहरण में 20 पर सेट कर दिया है, और IE9 में सीमाएँ नहीं चिपकी हैं

— क्रश

इसे अपने हेडर में सेट करने का प्रयास करें: <meta http-equiv = "X-UA-Compatible" सामग्री = "IE = 9" />

— Marakoss

Answer 11

मैंने IE9 को इस बग पर वर्किंग कॉर्नर से निष्क्रिय करने का निर्णय लिया। यह साफ, आसान और सामान्य प्रयोग करने योग्य है।

{
border-radius:10px;
border-radius:0px \0/;
background:linear-gradient(top , #ffeecc, #ff8800);
/* ... (-moz -ms,-o, -webkit) gradients */    
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#ffeecc,endColorstr=#ff8800);
}

Answer 12

IE9 में मुखौटा div एक अच्छा विचार है। मैं थोड़ा स्पष्ट करने में मदद करने के लिए कुछ पूर्ण कोड की आपूर्ति कर रहा हूं। हालांकि मैं एक डीआईवी में बटन लपेटने से खुश नहीं हूं, मुझे लगता है कि पीएनजी मास्क लगाना या एसवीजी का उपयोग करके सभी प्रयासों से गुजरना समझने में आसान है। शायद IE 10 इसे ठीक से समर्थन करेगा।

<!DOCTYPE html>
<html>
<head>
<title>Button Test</title>
<style>
.btn_mask { cursor:pointer;padding:5px 10px;border-radius:11px 11px 11px 11px;
 background-color:transparent;-moz-border-radius:11px 11px 11px 11px;
 -webkit-border-radius:11px 11px 11px 11px;overflow:hidden;padding:0px;
 float:left; }
.btn { cursor:pointer;text-decoration:none;border:1px solid rgb(153,153,153);
 padding:5px 10px;color:rgb(0,0,0);font-size:14px;font-family:arial,serif;
 text-shadow:0px 0px 5px rgb(255,255,255);font-size:14px;
 border-radius:11px 11px 11px 11px;-moz-border-radius:11px 11px 11px 11px;
 -webkit-border-radius:11px 11px 11px 11px;box-shadow:0px 0px 0px rgb(0,0,0);
 -moz-box-shadow:0px 0px 0px rgb(0,0,0);
 -webkit-box-shadow:0px 0px 0px rgb(0,0,0);background-color:rgb(255,204,0);
 background-image:linear-gradient(-90deg,rgb(255,255,153),rgb(255,204,0));
 background-image:-webkit-gradient(linear,50% 0%,50% 100%,from(rgb(255,255,153)),to(rgb(255,204,0)));-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorStr='#ffffff', EndColorStr='#ffcc00)')";background-image:-moz-linear-gradient(-90deg,rgb(255,255,153),rgb(255,204,0));
}
.btn:hover { cursor:pointer;text-decoration:none; border:1px solid rgb(153,153,153); padding:5px 10px 5px 10px; color:rgb(0,0,0); font-size:14px; font-family:arial,serif; text-shadow:0px 0px 5px rgb(255,255,255); font-size:14px; border-radius:11px 11px 11px 11px; -moz-border-radius:11px 11px 11px 11px; -webkit-border-radius:11px 11px 11px 11px; box-shadow:0px 0px 0px rgb(0,0,0); -moz-box-shadow:0px 0px 0px rgb(0,0,0); -webkit-box-shadow:0px 0px 0px rgb(0,0,0); background-color:rgb(255,255,0); background-image:linear-gradient(-90deg,rgb(255,255,0),rgb(255,255,153)); background-image:-webkit-gradient(linear,50% 0%,50% 100%,from(rgb(255,255,0)),to(rgb(255,255,153))); background-image:-moz-linear-gradient(-90deg,rgb(255,255,0),rgb(255,255,153)); }
</style>
</head>
<body>
<form name='form1'>
<div class='btn_mask'><input type='button' class='btn' value='a button'></div>
<div class='btn_mask'><input type='button' class='btn' value='a button'></div>
<div class='btn_mask'><input type='button' class='btn' value='a button'></div>
<div class='btn_mask'><input type='button' class='btn' value='a button'></div>
</form>
</body>
</html>

Answer 13

background: #4f81bd; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzRmODFiZCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM4YWJiZDciIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(left, #4f81bd 0%, #8abbd7 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#4f81bd), color-stop(100%,#8abbd7)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, #4f81bd 0%,#8abbd7 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, #4f81bd 0%,#8abbd7 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left, #4f81bd 0%,#8abbd7 100%); /* IE10+ */
background: linear-gradient(left, #4f81bd 0%,#8abbd7 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4f81bd', endColorstr='#8abbd7',GradientType=1 ); /* IE6-8 */

मेरे साथ ऐसा कर रहा था और एक बार जब मैंने "फिल्टर:" लाइन को हटा दिया तो रक्तस्राव दूर हो गया। इसके अलावा मैं पाई का उपयोग करता हूं।

bleeds:

    background: #8abbd7; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzhhYmJkNyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM0ZjgxYmQiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, #8abbd7 0%, #4f81bd 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#8abbd7), color-stop(100%,#4f81bd)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #8abbd7 0%,#4f81bd 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #8abbd7 0%,#4f81bd 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #8abbd7 0%,#4f81bd 100%); /* IE10+ */
background: linear-gradient(top, #8abbd7 0%,#4f81bd 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8abbd7', endColorstr='#4f81bd',GradientType=0 ); /* IE6-8 */
-pie-background: linear-gradient(#8ABBD7, #4f81bd);
behavior: url(../PIE/PIE.htc);

खून नहीं बहता:

    background: #8abbd7; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzhhYmJkNyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM0ZjgxYmQiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, #8abbd7 0%, #4f81bd 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#8abbd7), color-stop(100%,#4f81bd)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #8abbd7 0%,#4f81bd 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #8abbd7 0%,#4f81bd 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #8abbd7 0%,#4f81bd 100%); /* IE10+ */
background: linear-gradient(top, #8abbd7 0%,#4f81bd 100%); /* W3C */
-pie-background: linear-gradient(#8ABBD7, #4f81bd);
behavior: url(../PIE/PIE.htc);

त्वरित IE छाया फिक्स:

fixBoxShadowBlur($('*'));

function fixBoxShadowBlur(jQueryObject){
if($.browser.msie && $.browser.version.substr(0, 1) == '9'){
    jQueryObject.each(function(){
        boxShadow = $(this).css('boxShadow');
        if(boxShadow != 'none'){
            var bsArr = boxShadow.split(' ');
            bsBlur = parseInt(bsArr[2]) || 0;
            bsBlurMeasureType = bsArr[2].substr(("" + bsBlur).length);
            bsArr[2] = (bsBlur * 2) + bsBlurMeasureType;
            $(this).css('boxShadow', bsArr.join(' '));
        }
    });
}

}

Answer 14

आप ढाल प्राप्त करने के लिए छाया का उपयोग कर सकते हैं , और Internet Explorer 9 के साथ काम करने जा रहे हैंborder-radius

कुछ इस तरह:

box-shadow: inset 0px 0px 26px 5px gainsboro;

Answer 15

यकीन नहीं होता कि यह एक बंद या एक मान्य समाधान था लेकिन ...

मैंने पाया कि सीमा-त्रिज्या सीमा की चौड़ाई से अधिक है, मैंने इस मुद्दे का सामना नहीं किया। जब वे वही थे तो मुझे चौकोर कोने मिल रहे थे।

Answer 16

कम्पास और सैस का उपयोग करके आप इसे आसानी से प्राप्त कर सकते हैं जैसे:

@import "compass";
#border-radius {
@include border-radius('RADIUS'px); }
#gradiant{
$experimental-support-for-svg: true;
@include background-image(linear-gradient('COLOR') %,('COLOR') %,...; }

कम्पास आपके लिए एक एसवीजी छवि उत्पन्न करेगा।

इस तरह:

#gradiant {
 background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9InRvIiB5MT0iYm90dG9tIiB4Mj0idG8iIHkyPSJ0b3AiPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiMwODJhMmUiLz48c3RvcCBvZmZzZXQ9IjM1JSIgc3RvcC1jb2xvcj0icmdiYSg4LCA0MiwgNDYsIDAuNzYpIi8+PHN0b3Agb2Zmc2V0PSI0MyUiIHN0b3AtY29sb3I9InJnYmEoNywgNDMsIDQ3LCAwLjcxKSIvPjxzdG9wIG9mZnNldD0iNTglIiBzdG9wLWNvbG9yPSJyZ2JhKDQsIDQ0LCA1MCwgMC41OCkiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwNDJjMzIiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA=');
background-size: 100%;
background-image: -webkit-gradient(linear, to bottom, to top, color-stop(0%, #082a2e),   color-stop(35%, rgba(8, 42, 46, 0.76)), color-stop(43%, rgba(7, 43, 47, 0.71)), color-stop(58%, rgba(4, 44, 50, 0.58)), color-stop(100%, #042c32));
background-image: -webkit-linear-gradient(to bottom, #082a2e 0%, rgba(8, 42, 46, 0.76) 35%, rgba(7, 43, 47, 0.71) 43%, rgba(4, 44, 50, 0.58) 58%, #042c32 100%);
background-image: -moz-linear-gradient(to bottom, #082a2e 0%, rgba(8, 42, 46, 0.76) 35%, rgba(7, 43, 47, 0.71) 43%, rgba(4, 44, 50, 0.58) 58%, #042c32 100%);
background-image: -o-linear-gradient(to bottom, #082a2e 0%, rgba(8, 42, 46, 0.76) 35%, rgba(7, 43, 47, 0.71) 43%, rgba(4, 44, 50, 0.58) 58%, #042c32 100%);
background-image: linear-gradient(to bottom, #082a2e 0%, rgba(8, 42, 46, 0.76) 35%, rgba(7, 43, 47, 0.71) 43%, rgba(4, 44, 50, 0.58) 58%, #042c32 100%);

}

/* line 28, ../sass/boxshadow.scss */
#border-radius {
 -moz-border-radius-topright: 8px;
  -webkit-border-top-right-radius: 8px;
   border-top-right-radius: 8px;
 -moz-border-radius-bottomright: 8px;
  -webkit-border-bottom-right-radius: 8px;
  border-bottom-right-radius: 8px;

}

Answer 17

मेरे लिये कार्य करता है...

<!--[if gte IE 9]>
  <style type="text/css">
  .gradient{
   filter: ;
}
</style>

सीएसएस

border-radius: 10px;
background: #00a8db; /* Old browsers */
background: -moz-linear-gradient(top, #00a8db 0%, #116c8c 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#00a8db), color-    stop(100%,#116c8c)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #00a8db 0%,#116c8c 100%); /* Chrome10+,Safari5.1+     */
background: -o-linear-gradient(top, #00a8db 0%,#116c8c 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #00a8db 0%,#116c8c 100%); /* IE10+ */
background: linear-gradient(to bottom, #00a8db 0%,#116c8c 100%); /* W3C */
-webkit-box-shadow: 1px 5px 2px #999;
-moz-box-shadow: 1px 1px 5px #999;
box-shadow: 1px 1px 5px #999;
color: #fff;
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00a8db',     endColorstr='#116c8c',GradientType=0 ); /* IE6-8 */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background:     url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwYThkYiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMxMTZjOGMiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
/* W3C Markup, IE10 Release Preview */ 
background-image: linear-gradient(to top, #116C8C 0%, #00A5D7 100%);