ویژگی border-width در CSS
ویژگی border-width، می تواند عرض حاشیه (border) را مشخص کند.
نکته: برای ایجاد حاشیه، حتما باید از ویژگی border-style استفاده کنید.
ویژگی border-width، به دو حالت عددی و غیرعددی مقداردهی می شود.
border-width: 5px;
border-width: thin;
border-top-width: 5px;
border-right-width: 5px;
border-bottom-width: 5px;
border-left-width: 5px;
مقدار عددی border-width در CSS
برای مقداردهی عددی border-width، می توان از انواع واحدها مانند پیکسل، درصد و ... استفاده کرد.
border-width: 5px;
مقدار غیر عددی border-width در CSS
برای مقداردهی غیر عددی border-width، می توان از مقادیر زیر استفاده کرد:
- thin (نازک)
- medium (متوسط)
- thick (ضخیم)
border-width: thin;
border-width: medium;
border-width: thick;
جهت های borde width در CSS
border-width: 5px;
ویژگی border-width، در نمونه کد بالا، خلاصه ی چهار ویژگی است.
border-top-width: 5px;
border-right-width: 5px;
border-bottom-width: 5px;
border-left-width: 5px;
خلاصه نویسی border-width با یک مقدار در CSS
ویژگی border-width را می توان به چند صورت خلاصه نویسی کرد.
ویژگی border-width با یک مقدار:
border-width: solid;
- در چهار جهت به صورت یکسان اعمال می شود.
خلاصه نویسی border-width با دو مقدار در CSS
ویژگی border-width با دو مقدار:
border-width: y x;
- مقدار اول در جهت بالا و پایین (محور y)
- مقدار دوم در جهت راست و چپ (محور x)
border-width: 20px medium;
خلاصه نویسی border-width با سه مقدار در CSS
ویژگی border-width با سه مقدار:
border-width: top x bottom;
- مقدار اول در جهت بالا
- مقدار دوم در جهت راست و چپ (محور x)
- مقدار سوم در جهت پایین
border-width: 20px thin 5px;
خلاصه نویسی border-width با چهار مقدار در CSS
ویژگی border-width با چهار مقدار:
border-width: top right bottom left;
- مقدار اول در جهت بالا
- مقدار دوم در جهت راست
- مقدار سوم در جهت پایین
- مقدار چهارم در جهت چپ
border-width: 5px thin 15px 2px;
خلاصه درس
در این درس با ویژگی border-width در CSS:
- انواع مقداردهی
- خلاصه نویسی آن با مقدار های مختلف
آشنا شدیم.