كيف يعمل نصف قطر حدود CSS: الاختزال والنسب المئوية والدوائر وأشكال الحبوب

border-radius هي واحدة من أولى خصائص CSS التي يتعلمها معظم الناس وواحدة من آخر الخصائص التي يفهمونها تمامًا. من السهل تقريب جميع الزوايا الأربع للبطاقة بمقدار 12 بكسل. ثم يجب أن يكون الزر عبارة عن حبة بأي عرض، ويجب أن تكون الصورة الرمزية دائرة، وتحتاج فقاعة الدردشة إلى زاوية حادة واحدة، وفجأة الترتيب المختصر، الفرق بين 50% و 999px، ونصف القطر الذي &quot؛ يتوقف عن النمو والحصص؛ كل شيء مهم.

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

ليرة تركية؛DR: border-radius يدور حول عنصر &#39؛ زوايا. تقوم قيمة واحدة بتعيين جميع الزوايا الأربع، وتقوم قيمتان بتعيين الأزواج من أعلى اليسار/أسفل اليمين وأعلى اليمين/أسفل اليسار، ويتم تعيين ثلاث قيم من أعلى اليسار، ثم من أعلى اليمين وأسفل اليسار معًا، ثم من أسفل اليمين، وأربع قيم تعمل في اتجاه عقارب الساعة من أعلى اليسار. أنصاف أقطار البكسل هي منحنيات ثابتة؛ يتم قياس النسب المئوية مقابل العرض والارتفاع بشكل منفصل، لذلك 50% يصنع دائرة على مربع فقط. عندما يصل نصف القطر على طول الجانب إلى أكثر من الجانب، يقوم المتصفح بقياس كل نصف قطر لأسفل بشكل متناسب. ال مولد نصف قطر الحدود يتعامل مع الاختصار نيابةً عنك، من جانب العميل، مجانًا، بدون تسجيل.

ماذا تفعل خاصية نصف قطر الحدود CSS؟

ال border-radius الخاصية تدور حول الزوايا الخارجية للعنصر &#39؛s مربع الحدود. تصبح كل زاوية ربع شكل بيضاوي بنصف قطر أفقي ونصف قطر رأسي. عندما يكون كلا نصفي القطر متساويين، تكون الزاوية ربع دائرة.

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

يؤثر التقريب على أكثر من خط الحدود. يتم قص خلفية العنصر &#39؛s إلى الشكل المستدير، box-shadow يتبع المنحنى، وفي المتصفحات الحديثة كذلك outline. لا يتم قص المحتوى الموجود داخل العنصر إلا إذا قمت بإضافته overflow: hidden، وهو السبب الأكثر شيوعًا لفشل الزوايا الدائرية.

كيف يعمل اختصار نصف القطر الحدودي؟

border-radius هو اختصار لأربع خصائص طويلة: border-top-left-radius، border-top-right-radius، border-bottom-right-radius و border-bottom-left-radius. عدد القيم التي تقدمها يحدد الزوايا التي تنطبق عليها كل قيمة.

قيم	مثال	أعلى اليسار	أعلى اليمين	أسفل اليمين	أسفل اليسار
1	border-radius: 16px;	16px	16px	16px	16px
2	border-radius: 24px 8px;	24px	8px	24px	8px
3	border-radius: 24px 8px 0px;	24px	8px	0px	8px
4	border-radius: 20px 10px 5px 0px;	20px	10px	5px	0px

النمط هو نفس الترتيب في اتجاه عقارب الساعة الذي يستخدمه margin و padding، بدءًا من الزاوية العلوية اليسرى بدلاً من الجانب العلوي. يتم ملء القيم المفقودة من شريكها القطري: بقيمتين، النسخ من أسفل اليمين من أعلى اليسار والنسخ من أسفل اليسار من أعلى اليمين. مع ثلاث نسخ من أسفل اليسار من أعلى اليمين.

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

• جميع الزوايا الأربع متساوية تعطي قيمة واحدة.
• أعلى اليسار يساوي أسفل اليمين، وأعلى اليمين يساوي أسفل اليسار، يعطي قيمتين.
• أعلى اليمين يساوي أسفل اليسار (لكن القطر الآخر يختلف) يعطي ثلاث قيم.
• أي شيء آخر يعطي أربعة.

إحدى النتائج تفاجئ الناس. قم بتدوير الزاوية العلوية اليسرى فقط بمقدار 20 بكسل والإخراج هو border-radius: 20px 0px 0px;، وليس القيمة الأربعة 20px 0px 0px 0px. كلاهما صحيح؛ النموذج ثلاثي القيم أقصر لأن أعلى اليمين وأسفل اليسار كلاهما صفر. تحتفظ كل قيمة بوحدتها، لذا فإن الزاوية الصفرية تطبع كـ 0px.

ما هو الفرق بين PX و٪ لنصف قطر الحدود؟

نصف قطر البكسل هو الحجم المطلق. نسبة نصف القطر نسبة إلى حجم العنصر &#39؛s، ويتم قياس الأجزاء الأفقية والرأسية بشكل منفصل: نصف القطر الأفقي مقابل العرض، ونصف القطر الرأسي مقابل الارتفاع.

على المربع، تلك هي نفس الرقم. على المستطيل، ليسوا كذلك، ولهذا السبب 50% يحول المربع إلى دائرة ولكن المستطيل إلى قطع ناقص.

خذ مربع معاينة المولد &#39؛s، الذي يبلغ عرضه 224 بكسل وطوله 160 بكسل

قيمة	نصف القطر الأفقي	نصف القطر العمودي	شكل
16px	16px	16px	مستطيل مستدير، زوايا دائرية
50%	112px (50% من 224)	80px (50% من 160)	القطع الناقص
25%	56px	40px	مستطيل مستدير، زوايا بيضاوية
999px	999 بكسل، تم تحجيمها إلى 80 بكسل	999 بكسل، تم تحجيمها إلى 80 بكسل	حبة ذات نهايات مستديرة

تتصرف الوحدتان الأخريان مثل وحدات البكسل بمجرد حلها. em نسبة إلى العنصر &#39؛s حجم الخط الخاص و rem إلى حجم الخط الجذر، لذلك 1rem هو 16 بكسل مع إعدادات المتصفح الافتراضية. يستخدم em أو rem يتيح للزوايا التوسع مع حجم النص، وهو ما يناسب الأزرار والعلامات التي تنمو مع علامتها التجارية.

في المولد، تعمل أشرطة التمرير من 0 إلى 200 لـ px، ومن 0 إلى 50 لـ %، ومن 0 إلى 10 لـ em وrem، في خطوات الأعداد الصحيحة. يؤدي تبديل الوحدة إلى الاحتفاظ بالأرقام ومبادلة الوحدة، بحيث يصبح 16px 16%، وليس قيمة محولة.

لماذا يتوقف نصف القطر الحدودي الكبير عن الاستدارة؟

لأن المواصفات لا تسمح بتداخل منحنيات الزاوية. عندما يصل نصف القطر على جانب واحد إلى أكثر من طول الجانب &#39؛s، يقوم المتصفح بتقليص كل نصف قطر على العنصر بنفس العامل حتى يتناسب.

ال قاعدة تداخل الزوايا يعمل مثل هذا. لكل جانب من الجوانب الأربعة، اقسم طول الضلع &#39؛s على مجموع نصفي القطر اللذين يمسانه. خذ أصغر هذه النسب، سمها f. إذا كانت f أقل من 1، اضرب كل نصف قطر في f.

هنا هو الحساب ل border-radius: 999px في مربع المعاينة 224 في 160:

top and bottom sides:  224 / (999 + 999) = 0.1121
left and right sides:  160 / (999 + 999) = 0.0801
f = min(0.1121, 0.0801)                  = 0.0801
every radius: 999 × 0.0801               ≈ 80px

تنتهي كل زاوية بنصف قطر 80 بكسل، أي نصف ارتفاع 160 بكسل بالضبط، وبالتالي تصبح الأطراف القصيرة نصف دائرة مثالية. يحدث نفس الشيء عند 200 بكسل، الجزء العلوي من شريط تمرير البكسل: f هو 160/400 = 0.4، و200 × 0.4 يساوي 80 بكسل مرة أخرى. بعد النصف الأقصر، يتوقف نصف قطر البكسل عن تغيير أي شيء.

يتبع نتيجتان عمليتان. يمكن لزر الحبة استخدام أي قيمة بكسل كبيرة جدًا، ويظل حبة بأي عرض. ولأن القياس يتناسب مع جميع الزوايا الأربع، فإن زاوية واحدة كبيرة الحجم تعمل أيضًا على تقليص الزوايا الأخرى. اضبط من أعلى اليسار على 999 بكسل واترك الباقي عند 20 بكسل، وسيتم تصغير الزوايا 20 بكسل معه.

كيف يمكنك صنع أشكال مشتركة بنصف قطر الحدود؟

معظم الأشكال المستديرة في الواجهات تأتي من عدد قليل من الوصفات. يحتوي المولد على إعدادات مسبقة للأشكال الشائعة.

شكل	CSS	ملاحظات
حاد	border-radius: 0px;	الافتراضي لمعظم العناصر
دقيق	border-radius: 6px;	المدخلات، أزرار صغيرة
بطاقة	border-radius: 12px;	اللوحات والبطاقات
مدور	border-radius: 16px;	قيمة بدء المولد &#39؛s
حبة	border-radius: 999px;	يعمل بأي عرض عبر قياس التداخل
دائرة	border-radius: 50%;	يحتاج إلى عرض وارتفاع متساويين
ورقة	border-radius: 0px 24px;	زاويتان متقابلتان مدورتان
فقاعة	border-radius: 60% 40%;	الشكل العضوي من نسب غير متساوية
فقاعة الكلام	border-radius: 16px 16px 16px 0px;	زاوية حادة بالقرب من مكبر الصوت
علامة التبويب	border-radius: 8px 8px 0px 0px;	قمة مستديرة، قاع مسطح

دائرة. تعيين 50% على عنصر متساوي العرض والارتفاع. بالنسبة للصور الرمزية، أضف aspect-ratio: 1 و object-fit: cover في الصورة، لا تمتد الصورة غير المربعة إلى شكل بيضاوي.

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

فقاعة. الإعداد المسبق 60% 40% يضبط أعلى اليسار وأسفل اليمين على 60% والاثنان الآخران على 40%. في مربع المعاينة، يبلغ نصف القطر الأفقي على طول الحافة العلوية 134.4 بكسل و89.6 بكسل، مما يصل إلى 224 بكسل بالضبط، لذلك لا يحدث أي قياس ويلتقي المنحنيان بدون حافة مستقيمة متبقية بينهما. يمكن للإعدادات المسبقة تجاوز نطاق شريط التمرير: يستخدم Blob 60%، ويستخدم Pill 999px، ويحتفظ الإخراج بهذه القيم حتى تقوم بتحريك شريط التمرير.

فقاعة الكلام وعلامة التبويب. لا يحتوي أي من الشكلين على زوج قطري متطابق، لذا يحتاج كلاهما إلى القيم الأربع. قم بتعيين الزوايا بشكل فردي في المولد وهذا يؤكد عدم وجود شكل أقصر.

ما هو بناء جملة الشرطة المائلة في نصف القطر الحدودي؟

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

/* horizontal radii / vertical radii */
.lens {
  border-radius: 50% / 20%;
}

/* four horizontal, then four vertical */
.egg {
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
}

تتبع القيم الموجودة على كل جانب من الشرطة المائلة نفس قواعد واحد إلى أربعة مثل الاختصار العادي. لا يكتب مولد Toolz بناء جملة الشرطة المائلة: فهو يحدد نصف قطر واحد لكل زاوية، والذي يغطي الدوائر والحبوب والبطاقات والنقط. بالنسبة لأشكال البيض وأشكال العدسات المخصصة، ابدأ من المولد &#39؛s قم بإخراج وإضافة الجزء المائل يدويًا.

لماذا لا تظهر زواياي المستديرة؟

متى border-radius يبدو أنه لا يفعل شيئًا، والسبب دائمًا تقريبًا هو واحد من هذه الأسباب.

أعراض	سبب	يثبت
الصورة أو الطفل يخرج من الزوايا	لا يتم قص الأطفال بشكل افتراضي	يضيف overflow: hidden إلى الوالد المستدير، أو حول الطفل أيضًا
لا يوجد تغيير واضح على الإطلاق	العنصر ليس له خلفية أو حدود أو ظل	أعطها لون خلفية أو حدودًا حتى يكون الشكل مرئيًا
زوايا الطاولة تبقى مربعة	border-collapse: collapse على الطاولة	يستخدم border-collapse: separate مع border-spacing: 0، أو حول غلاف
الدائرة تبدو وكأنها بيضاوية	يختلف العرض والارتفاع	تعيين أبعاد متساوية أو aspect-ratio: 1
حبوب منع الحمل لها نهايات مدببة	استخدام 50% على عنصر واسع	استخدم قيمة px كبيرة مثل 999px
يتوقف نصف القطر عن الزيادة	التحجيم التداخل	متوقع؛ نصف القطر محدد بنصف الجانب الأقصر
تبدو زوايا العناصر الداخلية أكثر سمكًا	نصف القطر الداخلي يساوي نصف القطر الخارجي داخل الحشو	اضبط نصف القطر الداخلي على نصف القطر الخارجي مطروحًا منه الحشو

الأخير دقيق. بطاقة مع border-radius: 16px و padding: 8px يبدو احتواء صورة بنفس نصف القطر 16px غير متساوٍ، لأن المنحنى الداخلي يجب أن يكون أكثر إحكامًا. نصف القطر الداخلي الذي يتبع المنحنى الخارجي هو 16 ناقص 8، أي 8px.

كيف يتم دمج نصف القطر الحدودي مع الظلال والتدرجات؟

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

box-shadow يتتبع صندوق الحدود المستدير، لذا فإن الظل الناعم الموجود أسفل بطاقة 12 بكسل يحتوي على زوايا مستديرة 12 بكسل دون أي عمل إضافي. ال مولد الظل الصندوق معاينة الظلال على عنصر مستدير، و دليل الظل المربع يشرح قيم الإزاحة والطمس والانتشار وراءها.

يتم قص الخلفيات، بما في ذلك التدرجات، على الشكل المستدير أيضًا. لتصميم التعبئة، استخدم مولد التدرج CSS؛ ال دليل التدرج CSS يمشي عبر بناء الجملة. إذا كان يجب تغيير حجم الزاوية باستخدام إطار العرض بدلاً من البقاء ثابتًا، فإن مولد المشبك CSS يبني أ clamp() القيمة التي يمكنك استخدامها كنصف قطر، على سبيل المثال بطاقة مقاس 8 بكسل على الهواتف و20 بكسل على الشاشات العريضة.

باستخدام المولد، خطوة بخطوة

1. اختر إعدادًا مسبقًا مثل البطاقة أو حبوب منع الحمل أو الدائرة أو النقطة، أو ابدأ من الزوايا الافتراضية مقاس 16 بكسل.
2. ضبط الزوايا. يتم تبديل الزاوية افتراضيًا إلى مستقل، حيث يقوم كل شريط تمرير بتحريك الزاوية الخاصة به فقط. قم بتبديله إلى مرتبط لتحريك الأربعة معًا.
3. اختر وحدة: px، %، em أو rem.
4. تحقق من المعاينة. يتم تحديث مربع التدرج أثناء السحب، بما في ذلك قياس التداخل على القيم الكبيرة.
5. انسخ CSS. يقوم زر نسخ CSS بنسخ النسخة الكاملة border-radius: الإعلان في أقصر صوره.

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