ForHosting KIT · قراءة المواقع ومراقبتها

أنشئ قيمة border-radius في CSS

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

● Betaمجاني · داخل متصفحك

شغّل الأداة مجانًا اطّلع على الـAPI

استخدمها من الويبAPIالبريدTelegramالتطبيق قريبًا

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

اختر من قيمة واحدة إلى أربع قيم لنصف القطر

ابدؤوا بعدد القيم الذي يناسب الشكل المطلوب. تطبّق القيمة الواحدة نصف القطر نفسه على الزوايا الأربع، وهي مناسبة للبطاقات والأزرار وحقول الإدخال وغيرها من المكوّنات المتناظرة. تتناوب قيمتان بين الزوايا المتقابلة؛ فتتحكم الأولى في الزاويتين العلوية اليسرى والسفلية اليمنى، بينما تتحكم الثانية في العلوية اليمنى والسفلية اليسرى. عند استخدام ثلاث قيم، تخص الأولى الزاوية العلوية اليسرى، وتخص الثانية الزاويتين العلوية اليمنى والسفلية اليسرى، وتخص الثالثة الزاوية السفلية اليمنى. تتيح أربع قيم التحكم المستقل بترتيب عقارب الساعة: العلوية اليسرى ثم العلوية اليمنى ثم السفلية اليمنى ثم السفلية اليسرى. يجب أن يكون كل إدخال طول CSS أو نسبة مئوية غير سالبة، مثل 8px أو 0.5rem أو 12% أو 0. يُقبل الصفر بلا وحدة لأن CSS يسمح بذلك، أما أي رقم آخر فيحتاج إلى وحدة طول معروفة أو علامة النسبة المئوية. إبقاء القيم منفصلة يوضح علاقة كل موضع بزاويته قبل تركيب الصيغة المختصرة النهائية.

اقرأ CSS الناتج واستخدمه

تتضمن النتيجة حقلين يناسبان مساري عمل مختلفين. يحتوي الحقل border_radius على القيمة المختصرة وحدها، وهذا مفيد عندما يعرف التطبيق مسبقًا خاصية CSS التي سيعيّنها أو عندما يحتاج مسار رموز التصميم إلى قيمة مجردة. أما الحقل css فيحتوي على التصريح الكامل، بما فيه اسم الخاصية border-radius والنقطتان والفاصلة المنقوطة، لكي تتمكنوا من لصقه مباشرة في قاعدة نمط. تُخرج القيم بالترتيب نفسه الذي أُدخلت به ويفصل بينها فراغ واحد. لا يعيد المولّد ترتيب الزوايا ضمنيًا، ولا يحوّل الوحدات، ولا يختصر القيم المتكررة؛ فالحفاظ على الصيغة المدخلة يجعل النتيجة متوقعة ويمنع تغيير بنية رموز التصميم المقصودة. على سبيل المثال، ينتج عن إدخال 8px و16px التصريح border-radius: 8px 16px;، بينما تنتج القيم الأربع تصريحًا باتجاه عقارب الساعة. الناتج حتمي ولا يعتمد على أي قياس خاص بالمتصفح، ولذلك تُرجع API والأداة العاملة في المتصفح السلاسل النصية نفسها تمامًا.

تحقق من أنصاف الأقطار قبل نشر المكوّن

لا تسمح CSS بأنصاف أقطار سالبة للزوايا، لذلك يتوقف المولّد ويعيد خطأ إدخال كلما بدأت قيمة بعلامة ناقص. كما يرفض العناصر الفارغة والنصوص غير المدعومة والأرقام غير الصفرية التي لا تحمل وحدة والتصريحات التي تتضمن علامات ترقيم والمصفوفات التي لا تحتوي على قيمة واحدة إلى أربع قيم. يفيد هذا التحقق عندما تأتي اختيارات نصف القطر من نموذج أو ملف إعداد أو محرر سمة أو عملية آلية لبناء رموز التصميم، إذ قد يصل نص غير صحيح إلى ورقة الأنماط من دون ملاحظة. تُقبل الوحدات الشائعة المطلقة والنسبية إلى الخط أو إطار العرض والوحدات الفيزيائية والنسب المئوية، ومنها px وem وrem وvw وvh وvmin وvmax وch وcm وmm وin وpt وpc، إلى جانب الأنواع الحديثة لوحدات إطار العرض. تولّد هذه القدرة الصيغة المختصرة القياسية ذات نصف القطر الواحد لكل زاوية، ولا تنشئ البنية الإهليلجية المفصولة بشرطة مائلة. إذا احتجتم إلى زوايا إهليلجية، فاحتفظوا بنصفي القطر الأفقي والرأسي منفصلين في CSS الخاص بكم. استخدموا التصريح الناتج بوصفه مكوّنًا متحققًا منه، ثم عاينوه على العنصر الفعلي لأن النسب المئوية تعتمد على أبعاده.

حالات الاستخدام

إنشاء أنماط المكوّنات

أنشئ تصريح border-radius جاهزًا للصق في البطاقات والأزرار ومربعات الحوار والشارات وحقول النماذج.

التحقق من رموز التصميم

ارفض قيم نصف القطر السالبة أو غير الصحيحة قبل أن تنشر السمة أو المكتبة ورقة الأنماط الناتجة.

توليد CSS ديناميكي

حوّل اختيارات نصف القطر من محرر مرئي أو نموذج إعداد إلى صيغة CSS مختصرة يمكن توقعها.

الأسئلة الشائعة

ما تكلفة الاستخدام؟

تبلغ التكلفة $0.002 لكل طلب API، ويمكنكم أيضًا تشغيل الأداة مجانًا في المتصفح من هذه الصفحة.

ما ترتيب القيم الأربع؟

تتبع ترتيب CSS باتجاه عقارب الساعة: العلوية اليسرى، ثم العلوية اليمنى، ثم السفلية اليمنى، ثم السفلية اليسرى.

هل يمكن استخدام النسب المئوية؟

نعم. تُقبل النسب غير السالبة مثل 10% أو 50% إلى جانب وحدات طول CSS المدعومة.

لماذا تُرفض القيم السالبة؟

لا تسمح خاصية border-radius في CSS بأنصاف أقطار سالبة، ورفضها يمنع إنشاء تصريح غير صالح.

هل يُسمح بالصفر من دون وحدة؟

نعم. يُقبل الصفر وصيغه العشرية المكافئة بلا وحدة، أما القيم غير الصفرية فتتطلب وحدة مدعومة أو نسبة مئوية.

هل تولّد الأداة أنصاف أقطار إهليلجية بشرطة مائلة؟

لا. إنها تولّد الصيغة القياسية من قيمة إلى أربع قيم، مع تساوي نصفي القطر الأفقي والرأسي في كل زاوية.

للمطوّرين — الوصول عبر API

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

الـEndpoint

POSThttps://api.kit.forhosting.com/web/border-radius-generate

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

استدعِ الخدمة من بيئتك

curl -X POST https://api.kit.forhosting.com/web/border-radius-generate \
  -H "Authorization: Bearer $KIT_KEY" \
  -H "Content-Type: application/json" \
  -d '{"values":["8px","16px","24px","32px"]}'

const res = await fetch("https://api.kit.forhosting.com/web/border-radius-generate", {
  method: "POST",
  headers: {
    "Authorization": `Bearer ${process.env.KIT_KEY}`,
    "Content-Type": "application/json"
  },
  body: JSON.stringify({
    "values": [
      "8px",
      "16px",
      "24px",
      "32px"
    ]
  })
});
const { task_id } = await res.json();

import os, requests

res = requests.post(
    "https://api.kit.forhosting.com/web/border-radius-generate",
    headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
    json={
    "values": [
        "8px",
        "16px",
        "24px",
        "32px"
    ]
},
)
task_id = res.json()["task_id"]

<?php
$res = file_get_contents("https://api.kit.forhosting.com/web/border-radius-generate", false, stream_context_create([
  "http" => [
    "method"  => "POST",
    "header"  => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
    "content" => '{"values":["8px","16px","24px","32px"]}',
  ],
]));
$task = json_decode($res, true);

body := bytes.NewBufferString(`{"values":["8px","16px","24px","32px"]}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/web/border-radius-generate", body)
req.Header.Set("Authorization", "Bearer "+os.Getenv("KIT_KEY"))
req.Header.Set("Content-Type", "application/json")
res, _ := http.DefaultClient.Do(req)

مثال على الطلب

{
  "values": [
    "8px",
    "16px",
    "24px",
    "32px"
  ]
}

مثال على الاستجابة

{
  "task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
  "type": "web.border_radius_generate",
  "status": "queued",
  "_links": {
    "result": "/tasks/tsk_…/result"
  }
}

الواجهة غير متزامنة: تستلم task_id فور الإرسال، ويمكنك الاستعلام عن الحالة بمعدل طلب واحد في الثانية.

الأسعار

لكل طلب$0.002

السعر معلن كما تراه: لا tokens ولا نظام نقاط؛ وإن فشلت المهمة فلن تُحاسَب عليها.

الحدود

`timeout_sec`	30
`max_crawl_pages`	25

الأخطاء

HTTP	الرمز	المعنى
`401`	`unauthorized`	مفتاح الوصول مفقود أو غير صالح؛ تحقق من ترويسة Bearer في طلبك.
`402`	`insufficient_balance`	رصيدك لا يكفي لتنفيذ هذه المهمة؛ أعد شحن الرصيد ثم أعد المحاولة.
`404`	`unknown_type`	نوع المهمة المطلوب غير موجود في الكتالوج — راجع الاسم المرسل في الطلب.
`429`	`rate_limited`	تجاوزت الحد المسموح من الطلبات؛ انتظر قليلًا ثم أعد المحاولة.

اطّلع على توثيق KIT الكامل ←