Border Radius Generator
Generate border radius
Generate border radius يعمل محليا في المتصفح الخاص بك
border-radius: 12px;
About the
يقوم Border Radius Generator بتعيين الزوايا الأربع للمربع بشكل مستقل، مع معاينة مباشرة، ويمنحك CSS. ترتيب الاختصار هو الشيء الذي ينساه الجميع: أعلى اليسار، أعلى اليمين، أسفل اليمين، أسفل اليسار، في اتجاه عقارب الساعة من أعلى اليسار. تنطبق قيمة واحدة على جميع الزوايا الأربع، وتنطبق قيمتان على الأزواج القطرية، وأربع قيم تتناول كل زاوية على حدة. عندما تتطابق الأربعة، تقوم الأداة بإصدار نموذج القيمة الفردية، وهو النموذج الذي تريده بالفعل في معظم الأوقات.
Where people use the
- مطابقة نصف القطر لمواصفات التصميم دون تخمين قيم البكسل.
- تقريب الزوايا العلوية للبطاقة أو الشكل فقط.
- تشكيل زر حبة، وهو نصف قطر نصف ارتفاع العنصر.
- العثور على نصف القطر الذي يحول الصورة الرمزية المربعة إلى دائرة.
How to use the
- 1
اسحب شريط تمرير الزاوية
تحتوي كل زاوية على شريط تمرير خاص بها من 0 إلى 150 بكسل. يتم تدوير مربع المعاينة أثناء تحريكه.
- 2
أبقِ الزوايا مرتبطة أو افصلها
مع تشغيل الرابط، يؤدي تحريك أي شريط تمرير إلى تحريك العناصر الأربعة معًا. قم بإيقاف تشغيله لتشكيل الزوايا الفردية، وهي الطريقة التي تصنع بها ذيل فقاعة الكلام أو شكل ورقة الشجر.
- 3
اقرأ CSS
إذا كانت الأربعة متطابقة، فستحصل على اختصار ذو قيمة مفردة. إذا كانت مختلفة فستحصل على نموذج القيم الأربع الكامل بترتيب عقارب الساعة.
- 4
فكر في النسبة المئوية بدلاً من ذلك
نصف قطر 50 بالمائة على عنصر مربع يعطي دائرة. قم بتبديل وحدة البكسل بنسبة مئوية في ورقة الأنماط الخاصة بك إذا كان هذا هو ما تحتاجه.
النصائح وأفضل الممارسات
- استخدم النسب المئوية عندما يتغير حجم العنصر، واستخدم البكسل عندما لا يتغير ذلك.
- زر حبوب منع الحمل ليس نصف قطر ثابت؛ إنه نصف الارتفاع، لذا فإن 9999 بكسل هي الإجابة البطيئة ولكنها قوية.
- حافظ على اتساق نصف القطر عبر مجموعة المكونات؛ يبدو الخلط بين 4 بكسل و6 بكسل و8 بكسل عرضيًا.
الأسئلة المتداولة
ما ترتيب القيم الأربع؟
في اتجاه عقارب الساعة من أعلى اليسار: أعلى اليسار، أعلى اليمين، أسفل اليمين، أسفل اليسار. من وسائل التذكر المفيدة أنها تبدأ من حيث تبدأ القراءة وتدور مثل وجه الساعة.
ماذا تعني قيمتان أو ثلاث قيم؟
هناك قيمتان تحددان الأقطار: الأولى هي أعلى اليسار وأسفل اليمين، والثانية هي أعلى اليمين وأسفل اليسار. يتم تعيين ثلاث قيم أعلى اليسار، ثم أعلى اليمين وأسفل اليسار معًا، ثم أسفل اليمين.
كيف أقوم بعمل دائرة؟
استخدم 50 بالمائة على عنصر مربع بالفعل. إن استخدام وحدات البكسل يعطي دائرة فقط إذا كان نصف القطر يساوي نصف العرض، وهو ما ينقطع في اللحظة التي يتم فيها تغيير حجم العنصر.
هل يمكنني تقريب الزوايا بشكل مختلف أفقيًا وعموديًا؟
يسمح بناء الجملة الكامل بنصف قطر بيضاوي مكتوب كقيم أفقية، وشرطة مائلة، ثم قيم رأسية. تُصدر هذه الأداة شكلًا موحدًا أبسط، لذا أضف نسخة الشرطة المائلة يدويًا إذا كنت بحاجة إلى هذا الشكل.
لماذا يتم قص زاويتي المستديرة؟
لأنه لا يتم قص المحتوى الفرعي في المربع المستدير. أضف تجاوزًا مخفيًا للعنصر، وإلا ستظل الصورة أو الخلفية بداخله تظهر الزوايا المربعة.