সিএসএস [বদ্ধ] ব্যবহার করে গোলাকার কোণ তৈরি করা হচ্ছে

Question

আমি কীভাবে CSS ব্যবহার করে বৃত্তাকার কোণ তৈরি করতে পারি?

Comments

কেবল সিএসএস ব্যবহার করে গোলাকার কোণগুলি কীভাবে তৈরি করা যায় সে সম্পর্কে এখানে একটি ভাল ভিডিও: < sampsonvideos.com/video.php?video=12 >

— স্টান

ইয়াহু বিকাশকারী নেটওয়ার্ক থেকে বৃত্তাকার কোণার কৌশল সম্পর্কিত নিবন্ধ - 2007 থেকে from এবং YUI ফলক এলকে বৃত্তাকার কোণগুলি (চিত্রগুলির প্রয়োজন) যুক্ত করার একটি উপায় ।

— সাইমন_ওয়েভার

200+ লাইক বলছে এটি গঠনমূলক।

— স্টিভকাভ

আমি বিশ্বাস করি এটি একটি মূল্যবান ক্যানোনিকাল প্রশ্ন যা পুনরায় খোলার দাবি রাখে, বিশেষত যেহেতু এটি এখন সম্প্রদায় উইকি।

— ডেভিডআরআর

এটি বাদে এটি এমন তথ্য যা তুচ্ছভাবে ওয়েবে অন্যান্য অনেকগুলি জায়গা খুঁজে পাওয়া যায়। বিদ্যমান সংস্থানগুলির নকল করার জন্য এসওর প্রয়োজন নেই।

— জিম গ্যারিসন

Answer 1

সিএসএস 3 চালু হওয়ার পরে, CSS ব্যবহার করে গোলাকার কোণগুলি যুক্ত করার সর্বোত্তম উপায় হ'ল border-radiusসম্পত্তিটি ব্যবহার করে using আপনি সম্পত্তিটি নিয়ে অনুমানটি পড়তে পারেন , বা MDN- তে কিছু কার্যকর প্রয়োগের তথ্য পেতে পারেন :

আপনি যদি এমন কোনও ব্রাউজার ব্যবহার করছেন যা কার্যকর করে না (ক্রোম প্রি-ভি 4, ফায়ারফক্স প্রি-ভি 4, আইই 8, অপেরা প্রাক-ভি 10.5, সাফারি প্রি-ভি 5), তবে নীচের লিঙ্কগুলিতে বিশদভাবে বিভিন্ন পদ্ধতির পুরো গুচ্ছটি দেওয়া হয়েছে। আপনার সাইট এবং কোডিং স্টাইল অনুসারে এমন একটি সন্ধান করুন এবং এটির সাথে যান। border-radius

1. সিএসএস ডিজাইন: কাস্টম কর্নার এবং সীমানা তৈরি করা
2. সিএসএস বৃত্তাকার কোণার 'রাউন্ডআপ'
3. সিএসএস সহ 25 টি গোলাকার কর্নার কৌশল

Comments

আমি ডিডি_গ্রাউন্ডিকে প্রিফ্যাক্ট সমাধান হিসাবে খুঁজে পাই: dillerdesign.com/experiment/DD_roundies/#nogo

— vsync

@vsync তবে এটি IE8 dillerdesign.com/experiment/DD_roundies/#supported_ ব্রাউজারদের

— জিতেন্দ্র ব্যাস

আপনি যদি CSS3 (এসও এর মত) সীমানা-radius.com (অন্য রেফারেন্স। css3.info/border-radius-apple-vs-mozilla )

— মিকথমপসন

তৃতীয় লিঙ্কটি cssjuice.com/25- ভিত্তিতে- corners

— কৃষ্ণ

Answer 2

আমি স্ট্যাক ওভারফ্লো তৈরির দিকে এটি প্রথম দিকে তাকিয়েছিলাম এবং বৃত্তাকার কোণগুলি তৈরির কোনও পদ্ধতি খুঁজে পেলাম না যা আমার মনে হয় না যে আমি কেবল নর্দমার মধ্য দিয়ে চলেছি।

CSS3 শেষ পর্যন্ত সংজ্ঞা দেয়

border-radius:

এটি ঠিক কীভাবে আপনি এটি কাজ করতে চান। যদিও এটি সাফারি এবং ফায়ারফক্সের সর্বশেষতম সংস্করণগুলিতে ঠিক আছে, তবে আই 7-তে মোটেও নয় (এবং আমি আইআই 8 তেও ভাবি না) বা অপেরা।

ইতিমধ্যে, এটি পুরোপুরি হ্যাক। আমি এই মুহুর্তে আই 7, এফএফ 2/3, সাফারি 3 এবং অপেরা 9.5 জুড়ে এটি করার সর্বোত্তম উপায়টি কী মনে করে তা শুনতে আগ্রহী আমি ..

Comments

"... নর্দমা দিয়ে হেঁটেছি?" এটা কিছুটা কঠোর, জেফ। উত্তরটি হল, এটা নির্ভরশীল." একক রঙ, গ্রেডিয়েন্ট, বা ড্রপ-শ্যাডো বাক্সগুলি? তাদের কি উলম্ব, অনুভূমিকভাবে বা উভয়ই প্রসারিত করার দরকার আছে? বিভিন্ন প্রয়োজনীয়তার জন্য বিভিন্ন সমাধান। প্রয়োজনীয় ফ্যানসিয়ার, আরও নর্দমার মতো সমাধান।

— কার্ল ক্যামেরা

আমি এই পদ্ধতিটি ব্যবহার করতে পছন্দ করব। যদি কোনও ব্রাউজার এটি সমর্থন না করে তবে কে চিন্তা করে?

— স্যাম মারে-

টুইটার আইই ব্যবহারকারীদের কাছে তাদের ওয়েবসাইটগুলিতে কোণিত কোণে গোলাকার কোণার বৈশিষ্ট্যটি ডাউনগ্রেড করে। আসলেই বড় কথা নয়।

— ল্যান্স ফিশার

আমি অবশ্যই এই পদ্ধতিটি ব্যবহার করব - আসুন জিনিসগুলি যেমন হয় তেমনি হ্যান্ডেল করি। যদি কেউ ব্রাউজার ব্যবহার করে না (যেমন আইই), তবে তারা কোণাকার হিসাবে বৃত্তাকার কোণগুলি দেখার উপযুক্ত। :)

— 30

আমি এই উত্তরটি নীচে ভোট দিতে চাই, কারণ এটি উত্তর দেয় না যা উত্তরদাতা (জেফ) সবচেয়ে ভাল উপায় বলে মনে করে।

— allyourcode

Answer 3

আমি সাধারণত সিএসএসের সাহায্যে বৃত্তাকার কোণগুলি পাই, যদি ব্রাউজার সমর্থন না করে তবে তারা সমতল কোণে সামগ্রী দেখতে পাবে। যদি গোলাকার কোণগুলি আপনার সাইটের জন্য এতটা সমালোচনা না করে থাকে তবে আপনি নীচের এই লাইনগুলি ব্যবহার করতে পারেন।

আপনি যদি একই ব্যাসার্ধের সাথে সমস্ত কোণ ব্যবহার করতে চান তবে এটি সহজ উপায়:

.my_rounded_corners{
   -webkit-border-radius: 5px;
           border-radius: 5px;
}

তবে আপনি যদি প্রতিটি কোণে নিয়ন্ত্রণ করতে চান তবে এটি ভাল:

.my_rounded_corners{
    border: 1px solid #ccc;

    /* each value for each corner clockwise starting from top left */
    -webkit-border-radius: 10px 3px 0 20px;
            border-radius: 10px 3px 0 20px;
}

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

অন্যান্য উত্তরে বলা হয়েছে, এটি ফায়ারফক্স, সাফারি, ক্যামিনো, ক্রোমে সুন্দর করে কাজ করে।

Answer 4

আপনি যদি IE এ কোণ তৈরি করতে আগ্রহী হন তবে এটি কার্যকর হতে পারে - http://css3pie.com/

Comments

এটি সম্পূর্ণরূপে আমার জন্য কাজ করেছিল, সাথে সাথে অন্যান্য ব্রাউজারগুলির জন্য -মজ ইত্যাদি ইত্যাদি কোণার সংজ্ঞায়িত করে।

— ভরাল

Answer 5

আমি ব্যাকগ্রাউন্ড ইমেজ ব্যবহার করার পরামর্শ দেব। অন্যান্য উপায়গুলি প্রায় ততটা ভাল নয়: কোনও অ্যান্টি-এলিয়াসিং এবং সংজ্ঞাহীন মার্কআপ নেই। এটি জাভাস্ক্রিপ্ট ব্যবহার করার জায়গা নয়।

Comments

আমার অভিজ্ঞতাতে জাভাস্ক্রিপ্ট অবশ্যই ব্যর্থতা এবং ঝাঁকুনির সর্বোচ্চ সুযোগ রয়েছে। সমস্ত jquery প্লাগইনগুলির আমি কিছু ধরণের অপ্রত্যাশিত পার্শ্ব প্রতিক্রিয়া চেষ্টা করেছি

— সাইমন_উইভার

CurvyCorners ( curvycorners.net ) এবং ShadedBorder ( ruzee.com/blog/shadedborder ) না অ্যান্টি-অ্যালায়েসিং সমর্থন করার জন্য পরিচালনা করুন। এই সংগুলি অতিরিক্ত মার্কআপ ব্যবহারের বিভিন্ন উপায় রয়েছে, আপনি একটি শ্রেণীর সাহায্যে প্রয়োগ করতে পারেন এবং তারপরে সংযুক্ত উপাদানগুলির মধ্যে মার্কআপটি গতিশীলভাবে যুক্ত করা হয়। এটি বলেছিল, যত বেশি আমি এগুলিকে ব্যবহার করি তত বেশি আপনি ঠিক বলে মনে করেন ... এগুলি প্রোটোটাইপিংয়ের জন্য দরকারী তবে ডিওমে প্রচুর অতিরিক্ত ওজন যুক্ত করে। আমি যেভাবে চাই আমার নিজের মতো করে অ্যাডজাস্ট করেছি, সেগুলি আমি চিত্রগুলিতে রূপান্তর করার পরিকল্পনা করছি।

— বেন রেজেনস্পান

এই উত্তরটিতে কেউ উত্তরদাতা কী চিন্তা করছে তা বাস্তবায়নের জন্য পর্যাপ্ত পরিমাণে বিশদ ধারণ করে না।

— অ্যালিওরকোড

Answer 6

যেমন ব্রজেশ্বর বলেছেন: border-radiusসিএসএস 3 নির্বাচক ব্যবহার করে । এতক্ষণে আপনি যথাক্রমে মজিলা এবং ওয়েবকিট ভিত্তিক ব্রাউজারগুলির জন্য -moz-border-radiusএবং আবেদন করতে পারেন -webkit-border-radius।

তাহলে, ইন্টারনেট এক্সপ্লোরার দিয়ে কী ঘটে ?. ইন্টারনেট এক্সপ্লোরারকে কিছু অতিরিক্ত বৈশিষ্ট্য তৈরি করতে এবং আরও দক্ষতা অর্জনের জন্য মাইক্রোসফ্টের অনেকগুলি আচরণ রয়েছে।

এখানে: আপনার সিএসএসের মান থেকে প্রাপ্ত .htcকরার জন্য একটি আচরণ ফাইল । উদাহরণ স্বরূপ.round-cornersborder-radius

div.box {
    background-color: yellow; 
    border: 1px solid red; 
    border-radius: 5px; 
    behavior: url(corners.htc);
}

অবশ্যই, আচরণ নির্বাচনকারী কোনও বৈধ নির্বাচনকারী নয়, তবে আপনি এটি শর্তসাপেক্ষ মন্তব্যে (কেবলমাত্র আইআইয়ের জন্য) একটি ভিন্ন সিএসএস ফাইলে রাখতে পারেন।

আচরণ এইচটিসি ফাইল

Comments

এতগুলি কেন সিএসএস বৈধতার সাথে উদ্বিগ্ন তা কখনই বুঝতে পারি নি। এটি কোনও বিষয় নয়, কেবল ডোম বৈধকরণের বিষয়।

— vsync

এটি দেখতে যাওয়ার মতো মনে হচ্ছে।

— ম্যাথু ওলানিক

আচরণ ফাইলটি কী তা সম্পর্কে একটি সংক্ষিপ্ত বিবরণ যোগ করতে পারেন? আমি মনে করি যে ব্যক্তি এই প্রশ্নের উত্তর খুঁজছেন সম্ভবত তাদের সাথে পরিচিত হবে না।

— অ্যালিওরকোড

আচরণ ফাইলটির লিঙ্কটি মারা গেছে বলে মনে হচ্ছে

— 22:54

Answer 7

ফায়ারফক্স, সাফারি এবং ক্রোমের নতুন সংস্করণগুলিতে সিএসএস 3 প্রয়োগ করার জন্য সহায়তায় এটি "বর্ডার রেডিওস" দেখার পক্ষেও সহায়ক হবে।

-moz-border-radius: 10px;  
-webkit-border-radius: 10px;  
border-radius: 10px;

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

-moz-border-radius-topleft: 10px;  
-moz-border-radius-topright: 7px;  
-moz-border-radius-bottomleft: 5px;  
-moz-border-radius-bottomright: 3px;  
-webkit-border-top-right-radius: 10px;  
-webkit-border-top-left-radius: 7px;  
-webkit-border-bottom-left-radius: 5px;  
-webkit-border-bottom-right-radius: 3px;

Comments

আপনার সিনট্যাক্স-ওয়েবেকিট-বর্ডার-নীচে-রাইটস-ব্যাসার্ধের জন্য: 3px; এবং-ওয়েবেকিট-সীমানা-শীর্ষ-রাইটস-ব্যাসার্ধ: 10px; ওয়েবেকিট-বর্ডার-নীচে-ডান-ব্যাসার্ধ পড়তে হবে: 3px এবং -উবকিট-বর্ডার-শীর্ষ-ডান-ব্যাসার্ধ: 10px;

— ওল্ফার

Answer 8

jQuery হ'ল আমি ব্যক্তিগতভাবে এটির সাথে যেভাবে আচরণ করব। সিএসএস সমর্থনটি ন্যূনতম, চিত্রগুলি খুব স্পষ্টভাবে, আপনাকে jQuery এ বৃত্তাকার কোণ থাকতে চান উপাদানগুলি নির্বাচন করতে সক্ষম হতে আমার কাছে সঠিক ধারণা দেয় যদিও কিছু সন্দেহ নেই অন্যথায় তর্ক করবে। আমি এখানে কাজের জন্য একটি প্রকল্পের জন্য সম্প্রতি ব্যবহৃত একটি প্লাগইন থেরেস করে: http://plugins.jquery.com/project/jquery-roundcorners-canvas

Comments

@ এমকৌলে - এটি কি বাক্সটিকে ছায়া দেওয়ার পক্ষে সমর্থন করে?

— নিকোটনলাইন

jquery রাউন্ডকর্নার্স IE 8 সমর্থন করে না

— ইভিএনএমসিডি

Answer 9

এখানে সবসময় জাভাস্ক্রিপ্টের উপায় রয়েছে (অন্যান্য উত্তর দেখুন) তবে এটি যেহেতু নিখুঁতভাবে স্টাইলিং করা হয়েছে তাই এটি অর্জনের জন্য আমি ক্লায়েন্ট স্ক্রিপ্টগুলি ব্যবহারের বিরুদ্ধে kind

আমি যেভাবে পছন্দ করি (যদিও এর সীমা রয়েছে), 4 টি গোলাকার কোণার চিত্র ব্যবহার করা যা আপনি সিএসএস ব্যবহার করে আপনার বাক্সের 4 টি কোণে অবস্থান করবেন:

<div class="Rounded">
  <!-- content -->
  <div class="RoundedCorner RoundedCorner-TopLeft"></div>
  <div class="RoundedCorner RoundedCorner-TopRight"></div>
  <div class="RoundedCorner RoundedCorner-BottomRight"></div>
  <div class="RoundedCorner RoundedCorner-BottomLeft"></div>
</div>

---

/********************************
* Rounded styling
********************************/

.Rounded {
  position: relative;
}

.Rounded .RoundedCorner {
  position: absolute;
  background-image: url('SpriteSheet.png');
  background-repeat: no-repeat;
  overflow: hidden;

  /* Size of the rounded corner images */
  height: 5px;
  width: 5px;
}

.Rounded .RoundedCorner-TopLeft {
  top: 0;
  left: 0;

  /* No background position change (or maybe depending on your sprite sheet) */
}

.Rounded .RoundedCorner-TopRight {
  top: 0;
  right: 0;

  /* Move the sprite sheet to show the appropriate image */
  background-position: -5px 0;
}

/* Hack for IE6 */
* html .Rounded .RoundedCorner-TopRight {
  right: -1px;
}

.Rounded .RoundedCorner-BottomLeft {
  bottom: 0;
  left: 0;

  /* Move the sprite sheet to show the appropriate image */
  background-position: 0 -5px;
}

/* Hack for IE6 */
* html .Rounded .RoundedCorner-BottomLeft {
  bottom: -20px;
}

.Rounded .RoundedCorner-BottomRight {
  bottom: 0;
  right: 0;

  /* Move the sprite sheet to show the appropriate image */
  background-position: -5px -5px;
}

/* Hack for IE6 */
* html .Rounded .RoundedCorner-BottomRight {
  bottom: -20px;
  right: -1px;
}

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

---

আপডেট হয়েছে: স্প্রাইট শিট ব্যবহার করে ইমপ্লিটেশনটি উন্নত করা হয়েছে ।

Comments

সিএসএস স্প্রাইট ব্যবহার করে এগুলি সব সহজ করা যায়, সম্ভবত আমি আমার উত্তর আপডেট করব।

— mbillard

সেখানে, আমি স্প্রাইট শিটটি ব্যবহার করার জন্য কোডটি আপডেট করেছি।

— mbillard

Answer 10

আমি ব্যক্তিগতভাবে এই সমাধানটি সবচেয়ে ভাল পছন্দ করি, এটি আই.টি.কে বাঁকানো সীমানা রেন্ডার করতে অনুমতি দেওয়ার জন্য একটি। Htc।

http://www.htmlremix.com/css/curved-corner-border-radius-cross-browser

Answer 11

সাফারি, ক্রোম, ফায়ারফক্স> 2, আইই> 8 এবং কনকরার (এবং সম্ভবত অন্যরা) আপনি border-radiusসম্পত্তি ব্যবহার করে CSS এ এটি করতে পারেন । এটি এখনও আনুষ্ঠানিকভাবে অনুমানের অংশ নয়, দয়া করে কোনও বিক্রেতার নির্দিষ্ট উপসর্গ ব্যবহার করুন ...

উদাহরণ

#round-my-corners-please {
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
}

জাভাস্ক্রিপ্ট সমাধানগুলি সাধারণত divএটি গোলাকার করে তুলতে ছোট ছোট একটি গুলি যোগ করে , বা তারা 1px খাঁজানো কোণগুলি তৈরি করতে সীমান্ত এবং নেতিবাচক মার্জিন ব্যবহার করে। কেউ কেউ আইভিতে এসভিজি ব্যবহার করতে পারে।

আইএমও, সিএসএস উপায়টি সহজ, এটি সহজ, এবং এটি সমর্থন করে না এমন ব্রাউজারগুলিতে কৃপণভাবে হ্রাস পাবে। এটি অবশ্যই, কেবলমাত্র সেই ক্ষেত্রে যেখানে ক্লায়েন্টগুলি আইআই <9 এর মতো অ সমর্থিত ব্রাউজারগুলিতে তাদের প্রয়োগ করে না।

Answer 12

এখানে একটি HTML / জেএস / সিএসএস সমাধান যা আমি সম্প্রতি করেছি solution আইইতে পরম পজিশনিংয়ের সাথে একটি 1 পিক্সের রাউন্ডিং ত্রুটি রয়েছে সুতরাং আপনি চান যে পাত্রে একটি বৃহত পিক্সেল প্রশস্ত হওয়া উচিত তবে এটি বেশ পরিষ্কার।

এইচটিএমএল:

<div class="s">Content</div>

JQuery:

$("div.s")
.wrapInner("<div class='s-iwrap'><div class='s-iwrap2'>")
.prepend('<div class="tr"/><div class="tl"/><div class="br"/><div class="bl"/>');

সিএসএস:

/*rounded corner orange box - no title*/
.s {
    position: relative;
    margin: 0 auto 15px;
    zoom: 1;
}

.s-iwrap {
    border: 1px solid #FF9933;
}

.s-iwrap2 {
    margin: 12px;
}

.s .br,.s .bl, .s .tl, .s .tr {
    background: url(css/images/orange_corners_sprite.png) no-repeat;
    line-height: 1px;
    font-size: 1px;
    width: 9px;
    height: 9px;
    position: absolute;
}

.s .br {
    bottom: 0;
    right: 0;
    background-position: bottom right;
}

.s .bl {
    bottom: 0;
    left: 0;
    background-position: bottom left;
}

.s .tl {
    top: 0;
    left: 0;
    background-position: top left;
}

.s .tr {
    top: 0;
    right: 0;
    background-position: top right;
}

চিত্রটি মাত্র 18px প্রশস্ত এবং এতে 4 টি কোণ একত্রে প্যাক করা হয়েছে। দেখতে বৃত্তের মতো লাগে।

দ্রষ্টব্য: আপনার দ্বিতীয় অভ্যন্তরের মোড়কের দরকার নেই তবে আমি অভ্যন্তরীণ মোড়কের মার্জিনটি ব্যবহার করতে পছন্দ করি যাতে অনুচ্ছেদ এবং শিরোনামগুলিতে মার্জিনগুলি এখনও মার্জিন পতন বজায় রাখে। আপনি jquery এড়িয়ে যেতে পারেন এবং এইচটিএমএল মধ্যে কেবল অভ্যন্তরীণ মোড়ক রাখতে পারেন।

Answer 13

বৃত্তাকার কোণগুলি কাজ করা কতটা জটিল তা ইঙ্গিত হিসাবে, এমনকি ইয়াহু তাদের নিরুৎসাহিত করে (প্রথম বুলেটযুক্ত পয়েন্ট দেখুন)! মঞ্জুর, তারা এই নিবন্ধে কেবলমাত্র 1 পিক্সেল গোলাকার কোণগুলির বিষয়ে কথা বলছেন তবে এটি মজার বিষয় যে তাদের দক্ষতার সাথে একটি সংস্থাও সিদ্ধান্ত নিয়েছে যে তারা বেশিরভাগ সময় কাজ করার জন্য খুব বেশি ব্যথা করছে ।

আপনার নকশা যদি এগুলি ছাড়া বাঁচতে পারে তবে এটিই সবচেয়ে সহজ সমাধান।

Comments

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

— allyourcode

@allyourcode - আমি এটি আর দেখছি না। আমার মনে আছে এই পোস্টটি করা কিন্তু তারা যা বলেছিল ঠিক তা নয়। তবে এটি উপরের দ্বিতীয় লিঙ্কের মতো মনে হচ্ছে তারা 1px বৃত্তাকার কোণগুলির জন্য IE সমর্থন অপসারণের কথা উল্লেখ করেছে। তবে যে কোনও ক্ষেত্রে এই পোস্টটি গালে কিছুটা জিহ্বা ছিল যেহেতু তারা কেবলমাত্র 1px কোণ সম্পর্কে কথা বলছেন যা আমি মনে করি যে এটি সময়কে অযথা ব্যয় করে! আমি স্মরণ করি যে সময়ে আমি এটি সাধারণভাবে গোলাকার কোণগুলি সহকারে হতাশ হয়ে লিখেছিলাম এবং কোণার চিত্রগুলিতে স্থির

— হয়েছি

Answer 14

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

আমার সমাধানটি ডিজাইনারের কাছে হুকুম দেওয়ার জন্য যে তারা যদি বৃত্তাকার কোণগুলি (আপাতত) ব্যবহার করতে চায় তবে এটির একটি নির্দিষ্ট প্রস্থ হওয়া দরকার। ডিজাইনাররা বৃত্তাকার কোণগুলি পছন্দ করে (তাই আমিও করি), তাই আমি এটি যুক্তিসঙ্গত আপস বলে মনে করি।

Answer 15

রুজি সীমানা হ'ল জাভাস্ক্রিপ্ট-ভিত্তিক অ্যান্টি-এলিয়াসেড গোলাকার কোণার সমাধান যা আমি পেয়েছি যে সমস্ত বড় ব্রাউজারগুলিতে কাজ করে (ফায়ারফক্স 2/3, ক্রোম, সাফারি 3, আই 6/7/8 ), এবং কেবলমাত্র একমাত্র কাজ করে যখন বৃত্তাকার উপাদান এবং মূল উপাদান উভয়ই একটি পটভূমি চিত্র ধারণ করে। এটি সীমানা, ছায়া এবং আলোকিত করে।

নতুন RUZEE.ShadedBorder এর অন্য একটি বিকল্প, তবে এটি CSS থেকে স্টাইলের তথ্য পাওয়ার জন্য সমর্থনটির অভাব রয়েছে।

Answer 16

আপনি যদি সীমান্ত-ব্যাসার্ধ সমাধানটি নিয়ে যান তবে সিএসএস তৈরি করার জন্য এই দুর্দান্ত ওয়েবসাইট রয়েছে যা এটি সাফারি / ক্রোম / এফএফের জন্য কাজ করবে।

যাইহোক, আমি মনে করি আপনার নকশাটি বৃত্তাকার কোণার উপর নির্ভর করবে না এবং আপনি যদি টুইটারের দিকে তাকান তবে তারা কেবল আই ও অপেরা ব্যবহারকারীদের কাছে এফ **** বলে। বৃত্তাকার কোণগুলি একটি দুর্দান্ত, এবং আমি ব্যক্তিগতভাবে IE ব্যবহার করেন না এমন শীতল ব্যবহারকারীদের জন্য এটি ঠিক রাখছি :)।

এখন অবশ্যই এটি ক্লায়েন্টদের মতামত নয়। লিঙ্কটি এখানে: http://border-radius.com/

Answer 17

উপরে উল্লিখিত এইচটিসি সমাধান যুক্ত করার জন্য, আইই এর বৃত্তাকার কোণে পৌঁছানোর জন্য এখানে আরও একটি সমাধান এবং উদাহরণ রয়েছে ।

Answer 18

কোনও "সেরা" উপায় নেই; এমন উপায় আছে যা আপনার পক্ষে কাজ করে এবং এমন উপায় নেই যা না করে। এটি বলে, আমি সিএসএস + চিত্র ভিত্তিক, তরল গোলাকার কোণার কৌশল তৈরি সম্পর্কে একটি নিবন্ধ পোস্ট করেছি:

সিএসএস এবং চিত্রগুলি ব্যবহার করে রাউন্ড কর্নার সহ বক্স - পার্ট 2

এই কৌশলটির একটি ওভারভিউ হ'ল এটি নেস্টেড ডিআইভি এবং পটভূমি চিত্রের পুনরাবৃত্তি এবং অবস্থান ব্যবহার করে। নির্দিষ্ট প্রস্থের লেআউটের (স্থির প্রস্থের প্রসারিত উচ্চতা) জন্য আপনার তিনটি ডিআইভি এবং তিনটি চিত্রের প্রয়োজন need তরল প্রস্থের লেআউটের জন্য (প্রসারিত প্রস্থ এবং উচ্চতা) আপনার নয়টি ডিআইভি এবং নয়টি চিত্রের প্রয়োজন। কেউ কেউ এটিকে খুব জটিল মনে করতে পারেন তবে এটি সর্বকালের সর্বাধিকতম সমাধানের আইএমএইচও করুন। কোনও হ্যাক নেই, জাভাস্ক্রিপ্ট নেই।

Answer 19

আমি এই সম্পর্কে কিছুক্ষণ আগে একটি ব্লগ নিবন্ধ লিখেছিলাম, সুতরাং আরও তথ্যের জন্য, এখানে দেখুন

<div class="item_with_border">
    <div class="border_top_left"></div>
    <div class="border_top_right"></div>
    <div class="border_bottom_left"></div>
    <div class="border_bottom_right"></div>
    This is the text that is displayed
</div>

<style>
    div.item_with_border
    {
        border: 1px solid #FFF;
        postion: relative;
    }
    div.item_with_border > div.border_top_left
    {
        background-image: url(topleft.png);
        position: absolute;
        top: -1px;
        left: -1px;     
        width: 30px;
        height: 30px;
        z-index: 2;
    }
    div.item_with_border > div.border_top_right
    {
        background-image: url(topright.png);
        position: absolute;
        top: -1px;
        right: -1px;        
        width: 30px;
        height: 30px;
        z-index: 2;
    }
    div.item_with_border > div.border_bottom_left
    {
        background-image: url(bottomleft.png);
        position: absolute;
        bottom: -1px;
        left: -1px;     
        width: 30px;
        height: 30px;
        z-index: 2;
    }
    div.item_with_border > div.border_bottom_right
    {
        background-image: url(bottomright.png);
        position: absolute;
        bottom: -1px;
        right: -1px;        
        width: 30px;
        height: 30px;
        z-index: 2;
    }   
</style>

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

এছাড়াও, একবার CSS3 সীমানা-ব্যাসার্ধের সাথে ব্যাপকভাবে সমর্থিত হয়ে গেলে এটি গোলাকার কোণগুলি তৈরির সরকারী সর্বোত্তম উপায় way

Answer 20

সিএসএস ব্যবহার করবেন না, jQuery বেশ কয়েকবার উল্লেখ করা হয়েছে। আপনার উপাদানগুলির পটভূমি এবং সীমানার পুরো নিয়ন্ত্রণের প্রয়োজন হলে jQuery ব্যাকগ্রাউন্ড ক্যানভাস প্লাগইন ব্যবহার করে দেখুন। এটি ব্যাকগ্রাউন্ডে একটি এইচটিএমএল 5 ক্যানভাস উপাদান রাখে এবং আপনি আপনার প্রতিটি পটভূমি বা সীমানা আঁকতে অনুমতি দেয়। গোলাকার কোণ, গ্রেডিয়েন্টস এবং আরও কিছু।

Answer 21

অপেরা সীমানা-ব্যাসার্ধটিকে এখনও সমর্থন করে না (দৃশ্যত এটি সংস্করণ 10 এর পরে প্রকাশিত হবে)। ইতিমধ্যে, আপনি অনুরূপ প্রভাব তৈরি করতে একটি এসভিজি পটভূমি সেট করতে সিএসএস ব্যবহার করতে পারেন ।