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

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

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

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

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

باعتباره مولد CSS لنصف القطر الحدودي، فإن الجزء المفيد هو أنه يقوم بالحساب المختصر نيابةً عنك. اضبط أعلى اليسار وأسفل اليمين على 24 وأعلى اليمين وأسفل اليسار على 8، بصيغة px، ويقرأ الإخراج نصف القطر الحدودي: 24px 8px؛ لأن الأزواج القطرية متطابقة. قم بإسقاط أسفل اليمين إلى 0 ويصبح القيمة الثلاثة 24px 8px 0px، حيث لا يزال أعلى اليمين وأسفل اليسار متطابقين. يمكنك التحقق من كل نتيجة مقابل المعاينة قبل النسخ، وهو الغرض من مولد نصف قطر حدود CSS.