আইই 9 সীমানা ব্যাসার্ধ এবং পটভূমি গ্রেডিয়েন্ট রক্তপাত

Question

আই 99 স্পষ্টতই CSS3 স্ট্যান্ডার্ড সংজ্ঞা এর ব্যবহার করে বৃত্তাকার কোণগুলি পরিচালনা করতে সক্ষম border-radius।

সীমানা ব্যাসার্ধ এবং ব্যাকগ্রাউন্ড গ্রেডিয়েন্টের জন্য সমর্থন সম্পর্কে কী ? হ্যাঁ IE9 তাদের উভয়কে আলাদাভাবে সমর্থন করা, তবে আপনি যদি দুটি মিশ্রন করেন তবে বৃত্তাকার কোণটি থেকে গ্রেডিয়েন্ট রক্ত ​​বের হয়।

বৃত্তাকার কোণগুলির একটি বাক্সের নীচে শক্ত কালো রেখা হিসাবে ছায়াগুলি দেখানো সহ আমি অদ্ভুততাও দেখছি।

আইই 9-তে প্রদর্শিত চিত্রগুলি এখানে রয়েছে:

আমি কীভাবে এই সমস্যাটি ঘিরে কাজ করতে পারি?

Comments

@ মাইকেপি এবং @ মায়ানস্ট্রিয়াকুকের পরামর্শের জন্য ধন্যবাদ আমি অনুমান করি যে উত্তরটি আমি সন্ধান করছি তার আইনে কখন আরও সত্যিকারের গ্রেডিয়েন্ট / রাউন্ডিং সমর্থন করবে বা আমি কীভাবে দুজনকে একসাথে কাজ করতে পারি the

— সিগমাবেতা টুথ

কীভাবে দুজনকে একসাথে কাজ করতে হয় তার জন্য আপনার কাছে @ মায়ানস্ট্রাকের উত্তর রয়েছে। আপনি যদি বাস্তববাদী হতে চান, ব্যাকগ্রাউন্ড ইমেজ হিসাবে এসভিজি গ্রেডিয়েন্টগুলি সিএসএস গ্রেডিয়েন্টের (যা এখনও ভারী বিকাশ / আলোচনার অধীনে রয়েছে) এর চেয়ে খুব শীঘ্রই সমস্ত ব্রাউজার দ্বারা সম্পূর্ণরূপে সমর্থিত হওয়ার সম্ভাবনা বেশি।

— কেভিন পেনো

অবিশ্বাস্য এমএস এত পিছনে। এটি ২০১১ এবং আইই এখনও এই ধরণের সমস্যা নিয়ে কাজ করে। zzzzzzz। .. তাদের সাইটে তারা বলে: "দ্রুত এখন সুন্দর"। এটা নিশ্চিত. উপরে পোস্ট করা ছবিগুলি একবার দেখুন। একটি প্রাকৃতিক সৌন্দর্য কি!

— সানিরিড

সাননিড, ভাল, ক্রোমের উপাদানগুলিতে কোনও কোনও কোণে গোলাকার কোণগুলি রয়েছে। সত্যিই, এটি 2012 এবং ব্রাউজারগুলি এখনও এই ধরণের সমস্যা নিয়ে কাজ করছে :-)

— জো 13

@ সানিরিড এটি এখন 2013 হয়েছে এবং বাগটি এখনও রয়েছে :(

— স্লিক

Answer 1

এখানে এমন একটি সমাধান রয়েছে যা কোনও পটভূমির গ্রেডিয়েন্ট যুক্ত করে, কোনও অর্ধ-স্বচ্ছ চিত্র তৈরি করতে ডেটা ইউআরআই ব্যবহার করে যে কোনও পটভূমির রঙকে ওভারলে করে। আমি যাচাই করেছি যে এটি IE9 এর সীমানা ব্যাসার্ধে সঠিকভাবে ক্লিপ করা হয়েছে। এটি এসভিজি-ভিত্তিক প্রস্তাবগুলির চেয়ে হালকা ওজন তবে ক্ষতির দিক হিসাবে এটি রেজোলিউশন-ইন্ডিপেন্ডেন্ট নয়। আরেকটি সুবিধা: আপনার বর্তমান এইচটিএমএল / সিএসএসের সাথে কাজ করে এবং অতিরিক্ত উপাদানগুলির সাথে মোড়ানো প্রয়োজন হয় না।

আমি একটি ওয়েব অনুসন্ধানের মাধ্যমে একটি এলোমেলো 20x20 গ্রেডিয়েন্ট পিএনজি ধরেছি এবং এটি একটি অনলাইন সরঞ্জাম ব্যবহার করে ডেটা ইউআরআইতে রূপান্তরিত করেছি। ফলাফল ডেটা ইউআরআই সমস্ত এসভিজি মেসের জন্য সিএসএস কোডের চেয়ে ছোট, এসভিজি নিজেই অনেক কম! (আপনি কেবল শর্তসাপেক্ষ শৈলী, ব্রাউজার-নির্দিষ্ট সিএসএস ক্লাস ইত্যাদির সাহায্যে আইই 9 এ এটি শর্তযুক্ত প্রয়োগ করতে পারেন) অবশ্যই, পিএনজি তৈরি করা বোতামের আকারের গ্রেডিয়েন্টগুলির জন্য দুর্দান্ত কাজ করে তবে পৃষ্ঠার আকারের গ্রেডিয়েন্ট নয়!

এইচটিএমএল:

<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 আচরণ করতে চিত্রগুলি টান না আংশিক। তাদের সহায়ক পরামর্শের জন্য সবাইকে ধন্যবাদ।

— সিগমাবেতাথুথ

আমি দেখতে পেয়েছি যে সেটিংটি background-size: 100% 103%; background-position:center;আরও ভাল। উভয় মানের জন্য 100% শীর্ষ এবং নীচে কিছু অদ্ভুত সীমানা যুক্ত করে।

— মর্টেন

পটভূমি-আকার যুক্ত করা হচ্ছে: 100% 103%; পশ্চাদপট-অবস্থান: কেন্দ্র; আমার জন্য কিছু করে না

— গ্রেগরি বলঙ্কেস্তেজন

আপনি ইউরি এবং কেবল একটি চিত্রই ব্যবহার করছেন না কেন তা নিশ্চিত নয়? আমি অনুমান করি যে কোনও চিত্রের অর্থ সার্ভারে ie9 ব্যবহারকারীদের জন্য একটি অতিরিক্ত কল হবে, তবে এই সমস্ত অতিরিক্ত অক্ষর নন- ie9 ব্রাউজারগুলিতে পাঠানো ব্যর্থ মনে হচ্ছে। সমাধান আমার জন্য একটি চিত্র হিসাবে কাজ করছে, ব্যাখ্যাটি পছন্দ করবে।

— ডিসয়ে

তার ম্যানুয়াল ডেটা ইউআরআই হ'ল কিছু সিএসএস প্রিপ্রোসেসর সাধারণত মোতায়েনের সময় কী করে। "তবে এটি কী ধরনের কুৎসিত হ্যাক তা", এটি একটি কার্ডিনাল বুলশিট। এসভিজি হ'ল অন্য কোনও হিসাবে চিত্র, যদিও কোনও ভেক্টর। সুতরাং এসভিজিকে একটি হ্যাক বলা এবং পরিবর্তে একটি পিএনজি প্রস্তাব করা একেবারে বুদ্ধিমানের কাজ। এসভিজি কেন আরও ভাল? রেজোলিউশন স্বাধীনতা, একই কারণে আপনি রাস্টারাইজড চিত্রের পটভূমির পরিবর্তে সীমানা-ব্যাসার্ধ ব্যবহার করেন।

— স্ক্র্যাট 11

Answer 2

আমিও এই সমস্যাটি নিয়ে কাজ করছি। আরেকটি "সমাধান" হ'ল গ্রেডিয়েন্ট এবং বৃত্তাকার কোণগুলি থাকা আইটেমটির চারপাশে একটি ডিভ যুক্ত করা। সেই দ্বিটিকে একই উচ্চতা, প্রস্থ এবং বৃত্তাকার কোণার মানগুলি তৈরি করুন। ওভারফ্লো লুকানোতে সেট করুন। এটি মূলত কেবল একটি মুখোশ, তবে এটি আমার পক্ষে কাজ করে।

এইচটিএমএল:

<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

এটি আমার পক্ষে নিখুঁতভাবে কাজ করে এবং অন্যান্য প্রস্তাবিত সমাধানগুলির চেয়ে অনেক সহজ।

— সাইমন পি স্টিভেনস

বর্তমানে গৃহীত উত্তরের চেয়ে অনেক সহজ। এটি আমার জন্য আই 9 তে কাজ করে।

— অ্যান্ডি ম্যাকক্লাগেজ

এটি কাজ করে ... তাই করুণ ও করুণ hetic এটিই 'এইচটিএমএল 5' ব্রাউজার !? আইই 10 নিয়ে কেন আমি উত্তেজিত নই।

— টড ভ্যানস

@ Toddv চিন্তা করবেন না। সব শীঘ্রই শেষ হয়ে যাবে। শীঘ্রই যথেষ্ট নয়, তবে শীঘ্রই। Deringfireball.net/linked/2012/07/04/windows-gegemony দেখুন যে কোনও ভাগ্যের সাথে, আইই 12 সমর্থন করার জন্য কারওই কখনও চিন্তা করতে হবে না ... হতে পারে আইই 14 - এটি অস্পষ্ট হয়ে যায়।

— জিঙ্গলেস্টুলা

সামান্য একটি নোট, তবে আপনার সীমানা ব্যাসার্ধের বিবৃতিগুলি ফরোয়ার্ডের সামঞ্জস্যতা প্রচারের জন্য বিপরীত হওয়া উচিত। আমি সম্পাদনা করেছি।

— প্যারিস

Answer 3

আমি মনে করি এটি উল্লেখ করার মতো যে আপনি অনেক ক্ষেত্রেই গ্রেডিয়েন্ট এফেক্টটিকে "নকল" করতে এবং আই 9 এর কুৎসিত প্রান্তগুলি এড়াতে একটি ইনসেট বক্স-শ্যাডো ব্যবহার করতে পারেন। এটি বোতামগুলির সাথে বিশেষত ভাল কাজ করে।

এই উদাহরণটি দেখুন: 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);

— ভলমাইক

মার্জিত এবং সহজ। আমি ++,।

— এলিরান মালকা

বাক্সের বাইরে চিন্তা করার জন্য +1। ট্যাবগুলির পাশাপাশি বোতামগুলির জন্য অত্যধিক ভাল কাজ করে। ইনসেটটি ব্যবহার করে উপাদানটির অভ্যন্তরে গ্রেডিয়েন্ট রাখা হয়।

— গ্লেনজি

এটি আমি দেখেছি সেরা সমাধান। খাঁটি সিএসএস, অতিরিক্ত উপাদান বা চিত্রের প্রয়োজন হয় না।

— জাকস

দুর্দান্ত কৌশল কিন্তু আমার সাইটে সমস্ত গ্রেডিয়েন্ট রয়েছে। আমি বোকা অর্থাত্ তাদের সমস্তটি পরিবর্তন করতে পারি না।

— মেহমেট ফাতিহ ইল্ডেজ

Answer 4

আপনি এই সমস্যাটি সমাধান করতে CSS3 পিআইই ব্যবহার করতে পারেন:

http://css3pie.com/

অবশ্যই, আপনি কেবল গোলাকার কোণ এবং একটি ব্যাকগ্রাউন্ড গ্রেডিয়েন্টের সাথে একক উপাদানের উপর নির্ভরশীল যদি এটি অতিরিক্ত পরিমাণে হয়ে থাকে তবে আপনি যদি আপনার পৃষ্ঠাগুলিতে প্রচুর প্রচলিত সিএসএস 3 বৈশিষ্ট্যগুলি অন্তর্ভুক্ত করছেন এবং সহজ সমর্থন চান তবে এটি বিবেচনা করার বিকল্প রয়েছে আই 6 + এর জন্য

Comments

এমনকি css3pie এবং ie9 সহ, আমি গ্রেডিয়েন্টটি দেখতে পাচ্ছি না। আমি বৃত্তাকার কোণ এবং ড্রপ ছায়া দেখতে পাচ্ছি, কিন্তু গ্রেডিয়েন্ট নেই।

— কেভিন

Answer 5

আমি এই বাগ মধ্যে দৌড়ে। আমার পরামর্শ হ'ল I9 এ গ্রেডিয়েন্টের জন্য একটি পুনরাবৃত্তি পটভূমি চিত্র ব্যবহার করা হবে। IE9 বৃত্তাকার সীমানাগুলির পিছনে চিত্রটি সঠিকভাবে টাইল করে (আরসি 1 হিসাবে)।

সিএসএসের 1 লাইন প্রতিস্থাপনের জন্য 100 লাইন কোডের লেখা কী সহজ বা মার্জিত তা আমি দেখতে ব্যর্থ হয়েছি। এসভিজি দুর্দান্ত এবং সব কিছু, তবে যখন গ্রেডিয়েন্ট ব্যাকগ্রাউন্ডগুলির জন্য সহজ সমাধানগুলি বছরের পর বছর ধরে চলেছে তখন কেন সে সব কিছু করা যায়।

Answer 6

আমিও একই সমস্যার মধ্যে আটকে গিয়েছি এন দেখতে পেয়েছি যে আইই একবারে সীমানা ব্যাসার্ধ এবং গ্রেডিয়েন্ট উভয়ই রেন্ডার করতে পারে না, এটি উভয় দ্বন্দ্বই হয়, এই মাথা ব্যাথার সমাধান করার একমাত্র উপায় হ'ল ফিল্টার অপসারণ এবং এসভিজি কোডের মাধ্যমে গ্রেডিয়েন্ট ব্যবহার করা, শুধু আইই জন্য ..

আপনি এই সাইটটি মাইক্রোসফ্ট থেকে তাদের গ্রেডিয়েন্ট কালার কোড ব্যবহার করে এসভিজি কোড পেতে পারেন (বিশেষত গ্রেডিয়েন্টের জন্য এসজিগিতে তৈরি):

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

উপভোগ করুন :)

Comments

লিঙ্ক আর বৈধ নয়।

— পিষ্ট

Answer 7

IE9 এর ব্যাসার্ধটি ক্লিপ করতে কেবল একটি মোড়ক ডিভি (গোলাকার এবং ওভারফ্লো লুকানো) ব্যবহার করুন। সহজ, ক্রস ব্রাউজারে কাজ করে। এসভিজি, জেএস এবং শর্তসাপেক্ষ মন্তব্য অপ্রয়োজনীয়।

<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-gradient-with-rounded-corners/

মূলত, আপনি ফিল্টারটি সরাতে শর্তযুক্ত মন্তব্য ব্যবহার করেন এবং তারপরে গ্রেডিয়েন্টগুলির এসভিজি 'স্প্রাইটস' তৈরি করেন যা আপনি পটভূমির চিত্র হিসাবে ব্যবহার করতে পারেন।

সরল ও মার্জিত!

Comments

আমি এই বাস। বিশেষত বড় আপগুলি আমাকে কীভাবে এসভিজি ব্যবহার করে স্প্রাইট তৈরি করতে পারে তার শেষ পর্যন্ত আমার অনুসন্ধান শেষ করতে সহায়তা করার জন্য big যেহেতু এসভিজি স্কেলযোগ্য, এবং স্প্রাইটগুলি সম্ভব, আমি এসভিজি স্প্রাইট প্যাকগুলি সিএসএস গ্রেডিয়েন্টের চেয়ে অনেক বেশি আয়াতসুলভ প্যাকগুলি পেয়েছি এবং যেমন আমি উপরে বলেছি, সম্ভবত CSS গ্রেডিয়েন্টগুলির অনেক আগে ব্রাউজারগুলিতে 100% সমর্থন দেখতে পাবে।

— কেভিন পেনো

ওহ, আমি কেবল এটির সাথে যুক্ত করতে পারি এটি হ'ল বর্তমানে ওয়েবকিট এবং, আমি বিশ্বাস করি, অপেরাও সিএসএস ইমেজ url()কলগুলিতে এসভিজি সমর্থন করে । কেবলমাত্র একটি বাম ধরে রাখা, সুতরাং, 1000 শর্তসাপেক্ষে ড্রপ করে এবং সমস্ত সমর্থন করে বিজি এর জন্য এসভিজি পরিবেশন করে। অন্য সবার জন্য, একটি জঞ্জাল চিত্র পরিবেশন করুন। তারপরে এই হ্যাকটি ম্যানেজযোগ্য হয়ে যায়।

— কেভিন পেনো

Answer 9

আইই 9 সীমানা ব্যাসার্ধ এবং গ্রেডিয়েন্টগুলি একসাথে সঠিকভাবে পরিচালনা করে। সমস্যাটি হ'ল আইই 9 গ্রেডিয়েন্টের পাশাপাশি ফিল্টারকে যথাযথভাবে রেন্ডার করে । এটি সঠিকভাবে সমাধানের উপায় হ'ল স্টাইলের ঘোষণায় ফিল্টারগুলি অক্ষম করা যা ফিল্টার সম্পত্তি ব্যবহার করে।

কীভাবে এটি সর্বোত্তম সমাধান করা যায় তার উদাহরণ হিসাবে:

আপনার প্রধান স্টাইলশিটে আপনার বোতামের ক্লাস রয়েছে।

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

শর্তসাপেক্ষে আই আই 9 স্টাইলশিটে:

.btn { filter: none; }

আপনার প্রধান স্টাইলশিটের পরে যতক্ষণ আইই 9 স্টাইলশিটটি আপনার মাথায় উল্লেখ করা হয় ততক্ষণ এটি পুরোপুরি কার্যকর হবে।

Comments

ie9 রৈখিক গ্রেডিয়েন্টগুলি রেন্ডার করে না

— জেমস ওয়েস্টগেট

Answer 10

এটির জন্য99 এর অধীনে কেবলমাত্র একটি উপাদান দিয়ে কাজ করার একটি সহজ উপায় রয়েছে।

এই ঝাঁকুনিটি একবার দেখুন: http://jsfiddle.net/bhaBJ/6/

প্রথম উপাদানটি বর্ডার-রেডিয়াস সেট করে। দ্বিতীয় সিউডো-এলিমেন্ট ব্যাকগ্রাউন্ড গ্রেডিয়েন্ট সেট করে।

কয়েকটি মূল নির্দেশাবলী:

• পিতামাতার অবশ্যই আপেক্ষিক বা পরম অবস্থান থাকতে হবে
• পিতামাতার অবশ্যই উপচে পড়তে হবে: লুকানো ; (সীমানা ব্যাসার্ধের প্রভাবটি দৃশ্যমান হওয়ার জন্য)
• :: এর পূর্বে (বা :: পরে) সিউডো-এলিমেন্টের জেড-ইনডেক্স থাকতে হবে: -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 এ কাটা হয়নি

— ক্রাশ করুন

আপনার শিরোনামে এটি সেট করার চেষ্টা করুন: <মেটা http-برابر = "এক্স-ইউএ-সামঞ্জস্যপূর্ণ" সামগ্রী = "আইই = 9" />

— মারাকোস

Answer 11

আমি এই বাগটিটির চারপাশে কোণাকার থেকে আই 99 অক্ষম করার সিদ্ধান্ত নিয়েছি। এটি পরিষ্কার, সহজ এবং জেনেরিক ব্যবহারযোগ্য।

{
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

আইই 9 এর মুখোশ ডিভ একটি ভাল ধারণা। আমি কিছুটা পরিষ্কার করার জন্য কিছু সম্পূর্ণ কোড সরবরাহ করছি। যদিও আমি ডিআইভিতে বোতামটি মোড়ানো নিয়ে খুশি নই, তবে আমি মনে করি পিএনজি মাস্কটি এম্বেড করা বা এসভিজি ব্যবহার করে সমস্ত প্রচেষ্টা চালিয়ে যাওয়ার চেয়ে বোঝা আরও সহজ। হতে পারে আইই 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);

দ্রুত আই শ্যাডো ফিক্স:

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

গ্রেডিয়েন্ট অর্জনের জন্য আপনি ছায়া ব্যবহার করতে পারেন , এবং এর সাথে ইন্টারনেট এক্সপ্লোরার 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>

CSS

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%);