مولدات CSS للحدود

يعد CSS Border Radius Generator محررًا مرئيًا لخاصية CSS Border-radius. تقوم بسحب شريط تمرير لكل زاوية، ومشاهدة عنصر المعاينة في الوقت الفعلي، ونسخ CSS الدقيق الذي ينتجه - دون تخمين قيم البكسل وإعادة تحميل الصفحة.

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

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

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