border-radius في CSS

أقصر كتلة في CSS: ثماني نسب مئوية على خاصية واحدة، وبلا أي SVG في أي مكان. وهي شكل مختلف فعلًا عن كتل SVG، وتُقدَّم بوصفها شيئًا قائمًا بذاته لا بوصفها الكتلة نفسها بصيغة أخرى.

.blob {
  width: 320px;
  height: 320px;
  border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%;
}

ما يجدر معرفته

• خاصية واحدة على عنصر تملكه سلفًا — لا شيء تلصقه في الترميز.
• أربع زوايا فقط، فلا تستطيع إنتاج كتلة بستة فصوص ولا تتظاهر بذلك.
• تتحرّك وتنتقل بسلاسة، وهو ما لا يفعله مسار SVG دون عمل إضافي.
• القيم مولَّدة داخل حد التحجيم الخاص بالمتصفح نفسه، فما تراه هو ما يُرسم.

دعم المتصفحات

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

الحجم عبر الإعدادات المسبقة

كل إعداد مسبق تستطيع هذه الصيغة التعبير عنه، مقيسًا كما يخرجه المولّد. أصغرها سداسي عند 94 بايت؛ وأكبرها بريق عند 110 بايت. وعدد النقاط هو ما يصنع الفارق — فكل نقطة إضافية تضيف مقطعًا تكعيبيًا كاملًا من الإحداثيات.

بمزيد من التفصيل

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

أسئلة

كل رقم وكل شكل في هذه الصفحة أُنتج بتشغيل المولّد وقت البناء، فهو يصف الأداة التي أنت على وشك استخدامها لا نسخة كانت موجودة يومًا.