English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
يضبط خاصية border-top-left-radius لجعل زاوية "الجبهة اليسرى" من الحدود مستديرة.
جدول يوضح استخدام هذه الخاصية وتاريخ إصداراتها، بالإضافة إلى الجملة السكرية التي تستخدمها في سكربتات الجافا سكريبت.
| القيمة الافتراضية: | 0 |
|---|---|
| تطبيق: | جميع العناصر |
| الوراثة: | لا يوجد |
| يمكن تفعيله بالرسوم المتحركة: | نعم.يرجى الرجوع إلى خصائص الرسوم المتحركة. |
| الإصدار: | ميزة CSS3 الجديدة |
| جافا سكريبت الجملة: | object object.style.borderTopLeftRadius="8px" |
ملاحظة:حتى لو لم يتم تعريف الحدود أو تعيينها إلى none، فإن الخاصية border-top-left-radius تجعل خلفية العنصر تبدو مستديرة.
جملة هذا الخصائص كما يلي:
border-top-left-radius: [ length | percentage ]1 or 2 values | initial | inherit
يمكن استخدام هذا النمط القصير بأحد أو اثنين من المسافات الفاصلة.
قيمة الطول الثانية الاختيارية تعرف نصف القطر العمودي للركن العلوي اليساري، وبالتالي تكون شكل الزاوية ربع بيضاية.
إذا تم تهميش القيمة الثانية أو إذا كانت متساوية مع القيمة الثانية، فإن شكل الزاوية يكون ربع دائرة.
في المثال أدناه، يتم عرض كيفية استخدام خاصية border-top-left-radius.
div {
border: 2px solid #f08080;
border-top-left-radius: 20px;
}اختبر لمعرفة‹/›جدول التالي يصف قيم هذه الخاصية.
| القيمة | الوصف |
|---|---|
| length | قيمة طول باستخدام وحدات مثل px،pt،cm،em وما إلى ذلك، ولا يُسمح بالقيم السلبية. |
| percentage | حجم نصف القطر، بمئة. في حالة وجود قيمتين، يتم حساب النسبة المئوية الأولى بناءً على عرض العنصر (النصف القطر الأفقي)، والنسبة المئوية الثانية بناءً على طول العنصر (النصف القطر العمودي). لا يُسمح بالقيم السلبية. |
| initial | ضبط هذا الخصائص إلى قيمته الافتراضية. |
| inherit | إذا تم تحديد، فإن العناصر المرتبطة تأخذ قيمة الخاصية border-top-left-radius من العنصر الأب. |
توافق المتصفحات للخصائص border-top-left-radius، الأرقام في الجدول التالي تمثل أحدث إصدار من المتصفح يدعم هذه الخاصية؛ جميع المتصفحات الشائعة يدعمون هذه الخاصية.
|
انظر إلى التعليمات:CSS Border,CSS3 Border.
خصائص ذات صلة:border-radius,border-bottom-left-radius,border-bottom-right-radius,border-top-right-radius.