این آموزش در تاریخ ۱۴۰۰/۱۰/۲۸ آپدیت شده است.
آموزش ویژگی border-color در CSS
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش ویژگی border-color در CSS با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
ویژگی border-color در CSS
با استفاده از ویژگی border-color در CSS میتوان برای یک یا چهار جهت یک عنصر رنگ بوردر مشخص و یا تعریف کرد، مثلا میتونیم برای جهت بالا و پایین رنگ تعریف کنیم یاهم مثلا فقط برای جهت سمت راست و..
از این ویژگی برای خلاصه نویسی ویژگی های زیر استفاده میشه :
توجه داشته باشید : برای اینکه border-color عمل کنه باید حتما از ویژگی border-style استفاده کرده باشیم.
Free-Learn
مثال از این ویژگی
در ادامه میتوانید یک مثال از ویژگی border-color را در زبان CSS مشاهده نمایید.
مثال شماره ۱ : مشخص کردن رنگ برای ۴ جهت ( استفاده از یک مقدار برای ۴ جهت )
|
1 2 3 4 5 6 7 |
<style> h2{ border-color: orange; } </style> |
مثال شماره ۲ : مشخص کردن رنگ برای لبه های بالا و پایین و چپ و راست ( استفاده از ۲ مقدار ) ( مقدار اول میشه برای بالا و پایین و مقدار دوم میشه برای راست و چپ )
|
1 2 3 4 5 6 7 |
<style> h2{ border-color: orange black; } </style> |
مثال شماره ۳ : مشخص کردن رنگ برای ۴ جهت بصورت مجزا ( استفاده از ۴ مقدار )
|
1 2 3 |
h2{ border-color: orange black green red; } |
Free-Learn
جدول مشخصات ویژگی border-color در CSS
در جدول زیر میتوانید مشخصات کلی این ویژگی را در زبان CSS مشاهده نمایید.
| مقدار پیش فرض | black یا رنگ متن خوده عنصر |
|---|---|
| قابل ارث بری | ندارد | اطلاعات بیشتر |
| قابل متحرک سازی | دارد | اطلاعات بیشتر |
| نسخه | CSS1 |
| نحوه استفاده در جاوااسکریپت | object.style.borderColor=”red blue black green”; |
Free-Learn
پشتیبانی مرورگرها
در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از ویژگی border-color در CSS پشتیبانی میکنند یا خیر.
| نام ویژگی | Chrome | Firefox | Opera | Safari | Edge |
| border-color | بله | بله | بله | بله | بله |
Free-Learn
شکل نوشتاری
نحوه نوشتن یا استفاده یا سینتَکس (Syntax) این ویژگی در CSS بصورت زیر می باشد.
|
1 |
border-color: color|transparent|initial|inherit; |
Free-Learn
جدول مقادیر ویژگی border-color در CSS
در جدول زیر میتوانید، مقادیری را که میتوان در این ویژگی استفاده کرد مشاهده نمایید.
| مقدار | توضیح |
|---|---|
| color | مشخص کردن رنگ بوردر ( ۱ یا ۴ جهت عنصر ) ( پیش فرض رنگ black می باشد یا رنگ متن خوده عنصر ) ( حتما آموزش کار با رنگ ها را مشاهده نمایید ) |
| transparent | رنگ را بصورت شفاف ( بدون زمینه ) مشخص میکند |
| initial | استفاده از مقدار پیش فرض یا اولیه | اطلاعات بیشتر |
| inherit | استفاده از مقدار پدر یا والد ( به ارث بری ) | اطلاعات بیشتر |
Free-Learn
نکات و توضیحات
همونطور که در ابتدای آموزش گفتم هر عنصر ۴ جهت دارد در نتیجه ما میتونیم برای هر یک از این جهت ها بصورت جداگانه رنگ تعریف کنیم. که نحوه استفاده از مقادیر بصورت زیر می باشد :
- اگر از ۱ مقدار استفاده نمایید
|
1 |
border-color: blue; |
یعنی رنگ آبی برای ۴جهت عنصر تعریف می شود
- اگر از ۲ مقدار استفاده نمایید
|
1 |
border-color: blue green; |
یعنی رنگ آبی برای جهت بالا و پایین و رنگ سبز برای راست و چپ عنصر تعریف می شود.
- اگر از ۳ مقدار استفاده نمایید
|
1 |
border-color: red green blue; |
یعنی رنگ قرمز برای جهت بالا و رنگ سبز برای راست و چپ و رنگ آبی برای پایین عنصر تعریف می شود.
- اگر از ۴ مقدار استفاده نمایید
|
1 |
border-color: red green yellow blue; |
یعنی رنگ قرمز برای جهت بالا و رنگ سبز برای راست و رنگ زرد برای پایین و رنگ آبی برای سمت چپ عنصر تعریف می شود.
