الحالات الحدّية لتنفيذ CSS corner-shape في Blink

Noam Rosenthal

تاريخ النشر: 19 فبراير 2026

إحدى ميزات CSS التي طرحها Chrome في 2025 هي corner-shape. يتيح لك ذلك تحديد شكل الزاوية التي تحتوي على border-radius باستخدام كلمات رئيسية مثل bevel وscoop. يمكنك أيضًا استخدام الدالة superellipse التي تتلقّى قيمة تتراوح بين -Infinity وInfinity.

يمكنك الاطّلاع على المقالة الشاملة التي كتبها Amit Sheen على Frontend Masters للحصول على نظرة عامة رائعة حول هذه الميزة وطريقة عملها.

عند تنفيذ هذه الميزة في أوائل عام 2025، واجهتُ بعض التحديات الشيّقة ذات درجات الصعوبة المختلفة. لقد تعلّمتُ الكثير عن الأشكال البيضاوية الفائقة، ورسم الحدود في Blink، واستخدام الرياضيات المتجهة للرسومات الثنائية الأبعاد.

يشارك هذا المستند بعض المعلومات التي تعلّمتها، والتي قد تهمّ الآخرين أيضًا.

تماثل الأشكال المحدّبة والمقعّرة

في حين أنّ قيم superellipse (k) تتراوح عادةً بين 0 وInfinity، حيث تكون القيم بين 0 و1 مقعّرة وبقية القيم محدّبة (1 هو bevel)، تتراوح قيم superellipse في مواصفات CSS بين -Infinity وInfinity، وتمثّل 2k. يؤدي ذلك إلى إنشاء تناظر لأنّ أي قيمة موجبة تبدو وكأنّها صورة معكوسة للقيمة السالبة المقابلة لها.

ومع ذلك، لا تعمل صيغة superellipse بهذه الطريقة تلقائيًا.

صيغة superellipse هي: xk + yk = 1. لا تنتج الصيغة العكسية، x1/k + y1/k = 1، منحنى متناظرًا مرئيًا.

على سبيل المثال، إذا كان k هو 2:

مقارنة بين منحنيات القطع الناقص الفائق، حيث يظهر قطع ناقص فائق مستدير (باللون الأزرق) وقطع ناقص فائق مجوّف باستخدام الصيغة الأساسية (باللون الأحمر) ومنحنى متماثل بصريًا (باللون الأصفر)
  • يمثّل المنحنى الأزرق جولة superellipse (y=xn).
  • يمثّل المنحنى الأحمر scoop superellipse مع الصيغة الأساسية (y=x1/n).
  • يمثّل المنحنى الأصفر منحنى متماثلاً بصريًا مع المنحنى الأزرق (y=1-(1-x)n).

كما يوضّح الرسم البياني، فإنّ الأشكال ليست متطابقة.

لن أتطرّق إلى التفاصيل الرياضية، ولكنّ الأمر مرتبط بالمعايير المزدوجة وكيفية إدراكنا للانحناء.

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

صيغة الشكل المغلق

التحدي التالي هو تمثيل المنحنى، أو محيط superellipse، في شكل مغلق، أي معادلة تتألف من عمليات حسابية بسيطة. وهذا أمر ضروري لتحسين الأداء، ما يتيح للنظام تسليم عملية عرض superellipse إلى محرك الرسومات.

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

لحسن الحظ، باستخدام الانحدار الرمزي، يمكننا العثور على صيغة تمثّل نصف زاوية محدّبة كمنحنى بيزير مكعّب واحد.

يتضمّن منحنى Bezier التكعيبي أربع نقاط:

  • النقطة الأولى هي (0, 1).
  • النقطة الأخيرة هي نصف زاوية الشكل البيضوي الفائق الفعلي: 0.51/k,0.51/k.
  • تمتد نقطة التحكّم الأولى إلى الداخل عند مستوى نقطة البداية نفسه: (a, 1).
  • نقطة التحكّم الثانية هي القطرية لنصف الزاوية: (0.51/k - b,0.51/k + b).

إنّ قيمة نصف الزاوية المستخدَمة هنا هي إحداثية مهمة جدًا سنستخدمها في عمليات حسابية أخرى لاحقًا.

حيث يتم احتساب a وb من k باستخدام الانحدار الرمزي.

صورة توضيحية لنقاط التحكّم التي تم ربطها بمنحنى
للحصول على عرض توضيحي، راجِع هذا الرابط على Codepen.

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

بدون الخوض في التفاصيل الرياضية، إليك صيغة احتساب a وb:

p0 = 1.2430920942724248
p1 = 2.010479023614843
p2 = 0.32922901179443753
p3 = 0.2823023142212073
p4 = 1.3473704261055421
p5 = 2.9149468637949814
p6 = 0.9106507102917086

s = log2(k)
slope = p0 + (p6 - p0) * 0.5 * (1 + tanh(p5 * (s - p1)))
base = 1 / (1 + exp(slope * p1))
logistic = 1 / (1 + exp(slope * (p1 - s)))

a = (logistic - base) / (1 - base)
b =  p2 * exp(-p[3] * (s ^ p4))

الحدود والظلال

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

ومع ذلك، فإنّ الحدود والظلال في CSS لها خصائص عرض تختلف عن التعبئة:

  • الحدود غير موحّدة.
  • على سبيل المثال، يمكن أن يكون الحد العلوي 10 بكسل والحد الأيمن 5 بكسل، مع تضمين الزاوية بينهما.
  • بالإضافة إلى ذلك، تتجه هذه الخطوط إلى الداخل بدلاً من الاتجاهين.
  • لا يتم عرض الظلال والمخططات التفصيلية تمامًا مثل الخطوط.
  • بدلاً من ذلك، يتم تعديلها لتظهر الزوايا حادة.

في حين أنّ مسار عرض الحدود والظلال المعتاد كان يعمل بشكل جيد مع قيم corner-shape المستديرة أو الأكثر تحدبًا من ذلك (على سبيل المثال، squircle)، ويمكن تدويره بمقدار 90 درجة للأشكال الأكثر تقعرًا من scoop، لا يعمل هذا الإعداد التلقائي مع قيم corner-shape بين -1 و1، لأنّ إزاحة الحدود أو الظلال بشكل موازٍ للحافة ينتج عنها زاوية يبدو أنّ عرضها غير متساوٍ.

على سبيل المثال، يؤدي أخذ bevel زاوية وإزاحة الحدود ببضع وحدات بكسل إلى كلا الجانبين إلى إنشاء تأثير "البطن"، حيث يبدو منتصف الزاوية أعرض من الجانبين.

ولمراعاة ذلك، يهدف هذا الإجراء إلى إنشاء تأثير يعمل كحدّ خارجي، أي العثور على العمودي على منحنى الزاوية عند البداية، وجعله بطول عرض border أو shadow-spread.

لحسن الحظ، لا يكون ذلك ضروريًا إلا بالنسبة إلى علامات الحذف الفرعية (بين bevel والدائرة)، لأنّ علامات الحذف الفائقة مثل squircle تعمل على النحو المتوقّع.

لإيجاد العمودي على منحنى القطع الناقص الفرعي، يكفي إيجاد العمودي على منحنى القطع الناقص المكافئ، لأنّ القطع الناقص الفرعي والقطع الناقص المكافئ متقاربان.

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

يستمر الخط العادي بنفس طول border-width أو shadow-spread، ثم يتم قص المنحنى الناتج بالحواف (الحافة الداخلية للحدود، والحافة الخارجية للظل) لإنشاء مسار متواصل.

صورة توضيحية لزاوية ذات حدّ، توضّح كيفية تمديد المتّجه العمودي لتحديد شكل الحدّ
يمكنك الاطّلاع على هذا المثال على CodePen.

تتوفّر طرق أكثر دقة من الناحية الرياضية لاحتساب ظلّ superellipse، ولكنّ هذه الطريقة فعّالة وتنتج نتائج مناسبة لعرض الحدود والظلال.

عمليات الربط بالألوان

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

يتم تنفيذ ذلك في Blink (وفي المتصفّحات الأخرى) على النحو التالي. يتم قص الحافة التي سيتم طلاؤها بشكل تقريبي مثل مضلّع يتقاطع عند الوصلة المائلة، ويتم احتسابها بطريقة تتضمّن الحافة المعنية ولكن ليس أيًا من الحواف الأخرى. يساعد ذلك في تجنُّب التداخل، أي طلاء أحد الحواف الأخرى بالنمط واللون غير الصحيحَين.

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

ضع في اعتبارك رمز CSS التالي:

.weird {
  width: 200px;
  height: 200px;
  corner-shape: scoop round;
  border-radius: 80% 20% / 50% 50%;
  border-width: 10px;
  border-color: orange purple black blue;
  border-style: solid dotted;
}
مثال على عنصر CSS ذي حدود غير موحّدة، يعرض حوافًا برتقالية ومنقّطة باللون الأرجواني والسوداء والزرقاء.

نريد قص كل حافة (برتقالية، وأرجوانية منقّطة، وسوداء، وزرقاء منقّطة) بشكل منفصل، ثم رسم المسار.

لتحقيق ذلك بدون تداخل أي من الزوايا الثلاث الأخرى، يجب إجراء عملية قص دقيقة.

على سبيل المثال، ضع في اعتبارك الحافة البرتقالية (العلوية).

من الصعب العثور على مضلّع دقيق يتضمّن تلك الحافة بأكملها ولا يتداخل مع الحواف الأرجوانية أو الصفراء أو حتى السوداء. بعض الأشكال الأخرى أكثر صعوبة.

تتضمّن هذه العملية ثلاث مقاطع.

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

شكل زاوية مقصوصة يمثّل زاويتين (واحدة مقصوصة والأخرى مستديرة)

يتكوّن هذا الشكل من زاويتين (إحداهما scoop والأخرى مستديرة)، مع حدّ أدنى من الحافة بينهما، ويكونان متصلَين عند الأطراف.

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

يتم تحقيق ذلك عن طريق قصّ مضلّع من هذه الزاوية يمر بين زوايا حافة الحدود وحافة المساحة المتروكة، ويتوقف في اللحظة التي يكون على وشك التقاطع مع الحافة:

عرض توضيحي للمناطق التي سيتم قصّها

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

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

بخلاف ذلك، يمكن قص مثلث بسيط.

ملخّص

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

كانت ميزة corner-shape معقّدة بشكل مفاجئ. تهدف هذه المستندات إلى مساعدة المطوّرين المستقبليين الذين يعملون على هذه الميزة في Blink أو المتصفّحات الأخرى أو المواصفات.