این آموزش در تاریخ ۱۴۰۰/۱۰/۲۸ آپدیت شده است.
آموزش ویژگی border-radius در CSS
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش ویژگی border-radius در CSS با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
ویژگی border-radius در CSS
با استفاده از ویژگی border-radius در CSS میتوان لبه های یک عنصر رو گِرد کرد، مثلا میتونیم به راحتی یه عکس رو دایره ای کنیم.
از این ویژگی برای خلاصه نویسی ویژگی های زیر استفاده میشه :
Free-Learn
مثال از این ویژگی
در ادامه میتوانید یک مثال از ویژگی border-radius را در زبان CSS مشاهده نمایید.
مثال شماره ۱ : استفاده از ۱ مقدار برای ۴ جهت
|
1 2 3 |
img{ border-radius: 50%; } |
مثال شماره ۲ : استفاده از ۲ مقدار برای ۲ جهت ( مقدار اول برای لبه بالا و پایین – مقدار دوم برای لبه راست و چپ )
|
1 2 3 |
img { border-radius: 20px 90px; } |
مثال شماره ۳ : استفاده از مقدار درصدی
|
1 2 3 |
img { border-radius: 100% 50% 50% 100%/75% 69% 69% 75%; } |
Free-Learn
جدول مشخصات ویژگی border-radius در CSS
در جدول زیر میتوانید مشخصات کلی این ویژگی را در زبان CSS مشاهده نمایید.
| مقدار پیش فرض | ۰ |
|---|---|
| قابل ارث بری | ندارد | اطلاعات بیشتر |
| قابل متحرک سازی | دارد | اطلاعات بیشتر |
| نسخه | CSS3 |
| نحوه استفاده در جاوااسکریپت | object.style.borderRadius=”10px”; |
Free-Learn
پشتیبانی مرورگرها
در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از ویژگی border-radius در CSS پشتیبانی میکنند یا خیر.
| نام ویژگی | Chrome | Firefox | Opera | Safari | Edge |
| border-radius | بله | بله | ۱۱٫۵ | ۷ | بله |
Free-Learn
شکل نوشتاری
نحوه نوشتن یا استفاده یا سینتَکس (Syntax) این ویژگی در CSS بصورت زیر می باشد.
|
1 |
border-radius: length|%|initial|inherit; |
Free-Learn
جدول مقادیر ویژگی border-radius در CSS
در جدول زیر میتوانید، مقادیری را که میتوان در این ویژگی استفاده کرد مشاهده نمایید.
| مقدار | توضیح |
|---|---|
| length | استفاده از واحدهای اندازه گیری مقدار پیش فرض (۰) آموزش واحدهای اندازه گیری در CSS |
| % | استفاده از درصد |
| initial | استفاده از مقدار پیش فرض یا اولیه | اطلاعات بیشتر |
| inherit | استفاده از مقدار پدر یا والد ( به ارث بری ) | اطلاعات بیشتر |
Free-Learn
نکات و توضیحات
هر عنصر ۴ جهت دارد در نتیجه ما میتونیم هر یک از لبه های یک عنصر را بصورت جداگانه گرد کنیم. که نحوه استفاده از مقادیر بصورت زیر می باشد :
- اگر از ۱ مقدار استفاده نمایید
|
1 |
border-radius: 15px; |
یعنی لبه های ۴جهت عنصر به اندازه ۱۵ پیکسل گرد میشود
- اگر از ۲ مقدار استفاده نمایید
|
1 |
border-radius: 15px 10px; |
یعنی ۱۵ پیکسل برای لبه های بالا و پایین و ۱۰ پیکسل برای لبه های راست و چپ
- اگر از ۳ مقدار استفاده نمایید
|
1 |
border-radius: 15px 10px 30px; |
یعنی ۱۵ پیکسل برای لبه بالا و ۱۰ پیکسل برای لبه های راست و چپ و ۳۰ پیکسل برای لبه پایین
- اگر از ۴ مقدار استفاده نمایید
|
1 |
border-radius: 15px 10px 30px 50px; |
یعنی ۱۵ پیکسل برای لبه بالا و ۱۰ پیکسل برای لبه راست و ۳۰ پیکسل برای لبه پایین و ۵۰ پیکسل برای لبه سمت چپ
- اگر از مقادیر استفاده نمایید
|
1 |
border-radius: 2px 3px 4px 5px / 6px 7px 8px 9px; |
یعنی میشه :
|
1 2 3 4 |
border-top-left-radius: 2px 6px; border-top-right-radius: 3px 7px; border-bottom-right-radius: 4px 8px; border-bottom-left-radius: 5px 9px; |
