إنشاء زوايا مستديرة باستخدام CSS [مغلق]

Question

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

Answer 1

منذ أن تم تقديم CSS3، فإن أفضل طريقة لإضافة زوايا مستديرة باستخدام CSS هي استخدام border-radius ملكية.أنت تستطيع قراءة المواصفات على الممتلكات، أو الحصول على بعض معلومات التنفيذ المفيدة على MDN:

إذا كنت تستخدم متصفحًا لا ينفذ border-radius (Chrome pre-v4، Firefox pre-v4، IE8، Opera pre-v10.5، Safari pre-v5)، ثم توضح الروابط أدناه مجموعة كاملة من الأساليب المختلفة.ابحث عن الخيار الذي يناسب موقعك وأسلوب البرمجة الخاص بك، واتبعه.

1. تصميم سي اس اس:إنشاء زوايا وحدود مخصصة
2. الزوايا الدائرية في CSS "تقرير إخباري"
3. 25 تقنية للزوايا المستديرة باستخدام CSS

Answer 2

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

أخيرًا تم تعريف CSS3 ال

border-radius:

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

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

Answer 3

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

إذا كنت تريد استخدام جميع الزوايا بنفس نصف القطر، فهذه هي الطريقة السهلة:

.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;
}

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

كما قيل في الإجابات الأخرى، يعمل هذا بشكل جميل على Firefox وSafari وCamino وChrome.

Answer 4

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

Answer 5

أوصي باستخدام صور الخلفية.الطرق الأخرى ليست جيدة تقريبًا:لا يوجد تنعيم وترميز لا معنى له.هذا ليس المكان المناسب لاستخدام جافا سكريبت.

Answer 6

كما قال براجيشوار:باستخدام border-radius محدد CSS3.الآن، يمكنك التقديم -moz-border-radius و -webkit-border-radius للمتصفحات المعتمدة على Mozilla وWebkit، على التوالي.

إذن، ماذا يحدث مع إنترنت إكسبلورر؟.لدى 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

Answer 7

مع دعم CSS3 الذي يتم تنفيذه في الإصدارات الأحدث من Firefox وSafari وChrome، سيكون من المفيد أيضًا إلقاء نظرة على "Border Radius".

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

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

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

Answer 8

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

Answer 9

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

الطريقة التي أفضّلها (على الرغم من أن لها حدودًا)، هي استخدام 4 صور زاوية مستديرة ستضعها في الزوايا الأربع للمربع الخاص بك باستخدام CSS:

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

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

---

محدث: تم تحسين التنفيذ باستخدام ورقة الرموز المتحركة.

Answer 10

أنا شخصياً أحب هذا الحل أكثر من أي شيء آخر، فهو عبارة عن .htc للسماح لـ IE بعرض حدود منحنية.

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

Answer 11

في Safari وChrome وFirefox > 2 وIE > 8 وKonquerer (وربما غيرها) يمكنك القيام بذلك في CSS باستخدام الأمر border-radius ملكية.وبما أنها ليست جزءًا رسميًا من المواصفات حتى الآن، يرجى استخدام بادئة خاصة بالمورد...

مثال

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

تضيف حلول JavaScript عمومًا كومة صغيرة من ملفات divلجعلها تبدو مستديرة، أو يستخدمون الحدود والهوامش السلبية لإنشاء زوايا محززة بحجم 1 بكسل.قد يستخدم البعض أيضًا SVG في IE.

IMO، طريقة CSS أفضل، لأنها سهلة، وسوف تتدهور بشكل جيد في المتصفحات التي لا تدعمها.هذه، بالطبع، هي الحالة الوحيدة التي لا يفرضها العميل في المتصفحات غير المدعومة مثل IE <9.

Answer 12

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

لغة البرمجة:

<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.

Answer 13

كدليل على مدى تعقيد عمل الزوايا الدائرية، حتى ياهو لا يشجعهم (انظر النقطة النقطية الأولى)!من المؤكد أنهم يتحدثون فقط عن زوايا مستديرة بحجم 1 بكسل في تلك المقالة، ولكن من المثير للاهتمام أن نرى أنه حتى الشركة التي تتمتع بخبرتها خلصت إلى أنها تسبب الكثير من الألم لجعلهم يعملون معظم الوقت.

إذا كان التصميم الخاص بك يمكن أن يستمر بدونها، فهذا هو الحل الأسهل.

Answer 14

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

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

Answer 15

حدود روزي هو حل الركن المستدير الوحيد القائم على Javascript الذي وجدته والذي يعمل في جميع المتصفحات الرئيسية (Firefox 2/3 وChrome وSafari 3 وIE6/7/8)، وهو أيضًا الحل الوحيد الذي يعمل عندما يكون كلا المتصفحين العنصر المستدير والعنصر الأصلي يحتوي على صورة خلفية.كما أنه يفعل الحدود والظلال والتوهج.

الأحدث RUZEE.ShadedBorder يعد خيارًا آخر، ولكنه يفتقر إلى الدعم للحصول على معلومات النمط من CSS.

Answer 16

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

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

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

Answer 17

بالإضافة إلى حلول htc المذكورة أعلاه، إليك حلول وأمثلة أخرى يمكنك الوصول إليها زوايا مدورة في IE.

Answer 18

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

مربع ذو زوايا مستديرة باستخدام CSS والصور - الجزء 2

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

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>

إنه يعمل بشكل جيد.لا حاجة لجافا سكريبت، فقط CSS وHTML.مع الحد الأدنى من تداخل HTML مع الأشياء الأخرى.إنه مشابه جدًا لما نشره Mono، ولكنه لا يحتوي على أي اختراقات محددة لـ IE 6، وبعد التحقق، لا يبدو أنه يعمل على الإطلاق.هناك أيضًا حيلة أخرى وهي جعل الجزء الداخلي من كل صورة زاوية شفافًا حتى لا يحجب النص القريب من الزاوية.يجب ألا يكون الجزء الخارجي شفافًا حتى يتمكن من تغطية حدود القسم غير الدائري.

أيضًا، بمجرد دعم CSS3 على نطاق واسع باستخدام border-radius، ستكون هذه أفضل طريقة رسمية لإنشاء زوايا مستديرة.

Answer 20

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

Answer 21

لا يدعم Opera نصف القطر الحدودي حتى الآن (يبدو أنه سيكون في الإصدار بعد الإصدار 10).في هذه الأثناء، يمكنك استخدم CSS لتعيين خلفية SVG لإنشاء تأثير مماثل.