إنشاء زوايا دائرية باستخدام CSS



Answers

نظرت إلى هذا في وقت مبكر في إنشاء Stack Overflow ولم أجد أي طريقة لإنشاء زوايا مستديرة لم تتركني أشعر وكأنني مشيت من خلال المجاري.

يحدد CSS3 أخيرا

border-radius:

وهو بالضبط كيف تريد أن تعمل. على الرغم من أن هذا يعمل بشكل جيد في أحدث إصدارات Safari و Firefox ، ولكن ليس على الإطلاق في IE7 (ولا أفكر في IE8) أو Opera.

في غضون ذلك ، فإنه من الاختراق على طول الطريق. أنا مهتم بسماع ما يعتقده الآخرون هو أنظف طريقة للقيام بذلك عبر IE7 و FF2 / 3 و Safari3 و Opera 9.5 في الوقت الحالي ..

Question

كيف يمكنني إنشاء الزوايا الدائرية باستخدام CSS؟




كما قال Brajeshwar: استخدام محدد border-radius cd3 border-radius . الآن ، يمكنك تطبيق -moz-border-radius و -webkit-border-radius للمتصفحات القائمة على Mozilla و Webkit ، على التوالي.

ما الذي يحدث مع Internet Explorer؟ لدى Microsoft العديد من السلوكيات لجعل Internet Explorer بعض الميزات الإضافية والحصول على المزيد من المهارات.

هنا: ملف السلوك .htc للحصول round-corners من قيمة border-radius في CSS. فمثلا.

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

بالطبع ، محدد السلوك لا محدد صحيح ، ولكن يمكنك وضعه على ملف css مختلف مع التعليقات الشرطية (فقط لـ IE).

سلوك ملف HTC




لا تستخدم CSS ، تم ذكر jQuery عدة مرات. إذا كنت بحاجة إلى التحكم الكامل في خلفية وحدود العناصر الخاصة بك ، فقم بتجربة المساعد الإضافي لخلفية قماش jQuery . فهو يضع عنصر HTML5 Canvas في الخلفية ويسمح لك برسم كل الخلفية أو الحدود التي تريدها. زوايا مدورة ، التدرجات وهلم جرا.




إليك حل HTML / js / css الذي قمت به مؤخرًا. هناك خطأ التقريب 1px مع تحديد الموقع المطلق في IE بحيث تريد أن تكون الحاوية عددًا زوجيًا من وحدات البكسل على نطاق واسع ، ولكنها نظيفة جدًا.

HTML:

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

مسج:

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

CSS:

/*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;
}

الصورة بعرض 18 بكسل فقط وتضم جميع الزوايا الأربع معًا. يبدو وكأنه دائرة.

ملاحظة: أنت لا تحتاج إلى الغلاف الداخلي الثاني ، لكني أحب استخدام الهامش على الغلاف الداخلي بحيث لا تزال الهوامش في الفقرات والعناوين تحافظ على انهيار الهامش. يمكنك أيضًا تخطي jquery ووضع مجرد غلاف داخلي في html.







jQuery هي الطريقة التي أتعامل بها مع هذا شخصيا. دعم css ضئيل للغاية ، فالصور متألقة للغاية ، لتتمكن من اختيار العناصر التي تريد أن يكون لديك زوايا مستديرة في jQuery يجعل من المنطقي بالنسبة لي على الرغم من أن البعض لا شك في خلاف ذلك. هناك ملحق تم استخدامه مؤخرًا لمشروع في العمل هنا: http://plugins.jquery.com/project/jquery-roundcorners-canvas




إذا كنت مهتمًا بإنشاء زوايا في IE ، فقد يكون هذا مفيدًا - http://css3pie.com/




إذا كنت ترغب في استخدام حل border-radius ، فهناك هذا الموقع الرائع لتوليد CSS الذي سيجعله يعمل في رحلات السفاري / chrome / FF.

على أي حال ، أعتقد أن التصميم الخاص بك لا ينبغي أن يعتمد على الزاوية المستديرة ، وإذا نظرت إلى تويتر ، فإنها فقط تقول F **** إلى IE ومستخدمي الأوبرا. الزوايا المدورة هي أمر رائع ، وأنا شخصياً أحتفظ بهذا بشكل رائع للمستخدمين الذين لا يستخدمون IE :).

الآن بالطبع ليس رأي العملاء. هنا هو الرابط: border-radius.com




لا توجد طريقة "أفضل". هناك طرق تعمل من أجلك والطرق التي لا تعمل. بعد قولي هذا ، قمت بنشر مقالة حول إنشاء تقنية الزاوية المستديرة المستندة إلى CSS + ، هنا:

Box with Round Corners Using CSS and Images - Part 2

نظرة عامة على هذه الخدعة هي أن يستخدم DIVs المتداخلة وتكرار صورة الخلفية وتحديد المواقع. بالنسبة إلى التخطيطات ذات العرض الثابت (ارتفاع ثابت مطول العرض) ، ستحتاج إلى ثلاثة DIVs وثلاث صور. بالنسبة لتخطيط عرض السوائل (العرض والارتفاع المطلين) ، ستحتاج إلى تسعة DIVs وتسع صور. قد يعتبر البعض الأمر معقدًا للغاية ، لكن IMHO هو الحل الأمثل على الإطلاق. لا يوجد خارقة ، لا جافا سكريبت.




بالتأكيد ، إذا كان العرض ثابتًا ، فمن السهل جدًا استخدام CSS ، وليس على الإطلاق هجومًا أو شاقًا. عندما تحتاج إلى توسيع النطاق في كلا الاتجاهين تصبح الأمور متقلبة. بعض الحلول لها عدد مذهل من divs مكدسة فوق بعضها البعض لتحقيق ذلك.

حلّي هو أن أملي على المصمم أنه إذا أراد استخدام الزوايا الدائرية (في الوقت الحاضر) ، فيجب أن يكون عرضًا ثابتًا. يحب المصممون الزوايا المستديرة (وكذلك الحال بالنسبة لي) ، لذلك أجد ذلك بمثابة حل وسط معقول.




Links