مولّد نصف قطر الحدود

تأخذ border-radius حتى أربع قيم، واحدة لكل زاوية، بدءًا من العليا اليسرى ومضيًّا باتجاه عقارب الساعة. وقيمة واحدة تدوّر الأربع بالتساوي، وهو يغطّي معظم ما يحتاجه أي أحد.

والبكسلات تبقى ثابتة؛ والنسب المئوية تتبع الصندوق. فنصف قطر 16 بكسل هو 16 بكسل مهما كان مقاس البطاقة. أما نصف قطر 50% فهو نصف العرض أفقيًا ونصف الارتفاع عموديًا، فيحوّل أي مستطيل إلى قطع ناقص ويستمرّ في فعل ذلك مع تغيّر مقاس العنصر.

والصورة التي تُسقطها معظم المولّدات هي الشرطة المائلة. border-radius: 40% 60% 55% 45% / 45% 35% 65% 55% تعطي كل زاوية نصف قطر أفقيًا وآخر عموديًا مختلفَين. فتصير كل زاوية ربع قطع ناقص لا ربع دائرة، والنتيجة هي الشكل العضوي الناعم المستعمل في كل صفحات الهبوط الحديثة. ولا سبيل آخر لإنتاجه في CSS.

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

اضغط «اصنع شكلًا عضويًا». تلك هي الصورة الإهليلجية بثماني نسب مئوية مختلفة. غيّر رقمًا واحدًا وراقب زاوية واحدة تتشوّه. وأعطِ العنصر خلفية متدرّجة فيكون لديك الشكل الزخرفي الذي كان سيكون ملفّ SVG لولا ذلك — إلا أن هذا يتمدّد ويتحرّك ولا يكلّف شيئًا في التنزيل.

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

والحبّة ليست 999 بكسل، مفهوميًا. بل هي «مستديرة قدر الإمكان»، و999 بكسل هو التعبير الاصطلاحي عنها. فالمتصفّح يقصرها على نصف الارتفاع، فيبقى الزرّ حبّةً بأي مقاس دون أن تتتبّع الرقم.

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

والزاوية نصف مادّية البطاقة؛ والنصف الآخر هو الظلّ.