خاصیت border در CSS
خاصیت border در CSS این امکان را به شما می دهد که استایل، عرض و رنگ حاشیه یک عنصر HTML را مشخص کنید.
از چهار طرف حاشیه دارم
حاشیه ی پایین (bottom morder) به رنگ قرمز دارم
حاشیه ای با گوشه های گرد دارم
خاصیت border-style در CSS
خاصیت border-style در CSS مشخص می کند که حاشیه به چه شکلی نمایش داده شود.
استفاده از مقادیر زیر برای این خاصیت مجاز است:
-
dotted- حاشیه ای نقطه نقطه را تعریف می کند -
dashed- حاشیه ای به شکل خطوط فاصله را تعریف می کند -
solid- حاشیه ای به شکل یک خط مستقیم را تعریف می کند -
double- حاشیه به شکل دو خط مستقیم را تعریف می کند -
groove- یک حاشیه سه بعدی با استایل groove را تعریف می کند که نتیجه نمایش آن بستگی به خاصیت border-color دارد -
ridge- یک حاشیه سه بعدی با استایل ridge را تعریف می کند که نتیجه نمایش آن بستگی به خاصیت border-color دارد -
inset- یک حاشیه سه بعدی با استایل inset را تعریف می کند که نتیجه نمایش آن بستگی به خاصیت border-color دارد -
outset- یک حاشیه سه بعدی با استایل outset را تعریف می کند که نتیجه نمایش آن بستگی به خاصیت border-color دارد -
none- باعث می شود عنصر مورد نظر بدون حاشیه نشان داده شود -
hidden- حاشیه را مخفی می کند
خاضیت border-style می تواند از یک تا چهار مقدار مختلف (برای هر یک حاشیه بالا، حاشیه راست، حاشیه پایین و حاشیه چپ) داشته باشد.
مثال
مثالی برای استایل های مختلف border:
p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
p.double {border-style: double;}
p.groove {border-style: groove;}
p.ridge {border-style: ridge;}
p.inset {border-style: inset;}
p.outset {border-style: outset;}
p.none {border-style: none;}
p.hidden {border-style: hidden;}
p.mix {border-style: dotted dashed solid double;}
نتیجه:
حاشیه نقطه ای.
حاشیه خطوط فاصله.
حاشیه به شکل خط.
حاشیه به شکل دو خط.
حاشیه سه بعدی با استایل groove.
حاشیه سه بعدی با استایل ridge.
حاشیه سه بعدی با استایل inset.
حاشیه با استایل outset.
بدون حاشیه.
حاشیه ترکیبی.
توجه: بدون مقدار دهی خاصیت border-style هیچ یک از خاصیت های مربوط به حاشیه که در ادامه این فصل آموزش داده خواهد شد تاثیری نخواهد داشت.
خاصیت border-width در CSS
خاصیت border-width عرض چهار حاشیه (بالا، راست، پایین، چپ) را مشخص می کند.
این خاصیت را می توان با یکی از واحد های: em ,cm ,pt ,px و ... و یا با یکی از مقادیر پیشفرض: thin (نازک)، medium (متوسط) و thick (ضخیم) مقدار دهی کرد.
خاصیت border-width می تواند از یک تا چهار مقدار برای هر یک از حاشیه های بالا، راست، پایین و چپ داشته باشد.
عرض این حاشیه 5px است
مثال
border-style: solid;
border-width: 5px;
}
p.two {
border-style: solid;
border-width: medium;
}
p.three {
border-style: solid;
border-width: 2px 10px 4px 20px;
}
خاصیت border-color در CSS
خاصیت border-color رنگ چهار حاشیه (بالا، راست، پایین و چپ) مشخص می کند.
در CSS رنگ ها می تونن به یکی از شکل های زیر مشخص شوند:
- نام یک رنگ معتبر - مانند "red" (قرمز)
- مقدار هگزادسیمال (HEX) - شبیه این: "#ff0000"
- مقدار RGB - شبیه این: "(rgb(255,0,0"
خاصیت border-color می تواند از یک تا چهار مقدار برای هر یک از حاشیه های بالا، راست، پایین و چپ داشته باشد.
اگر خاصیت border-color مشخص نشود از رنگ عنصر به عنوان رنگ پیشفرض حاشیه استفاده می شود.
حاشیه قرمز
مثال
border-style: solid;
border-color: red;
}
p.two {
border-style: solid;
border-color: green;
}
p.three {
border-style: solid;
border-color: red green blue yellow;
}
تعیین border جداگانه برای هر سمت
در مثال های بالا مشاهده کردید که می توان حاشیه های مختلفی را برای هر طرف مشخص کرد.
همچنین در CSS خصوصیاتی برای مشخص کردن هر یک از مرزهای بالا، راست، پایین و چپ وجود دارد.
مثال
border-top-style: dotted;
border-right-style: solid;
border-bottom-style: dotted;
border-left-style: solid;
}
نمونه کد بالا می تواند به صورت زیر هم نوشته شود که خروجی آن نتیجه مشابه کد بالا میدهد:
اما نمونه کد بالا چگونه کار می کند:
اگر خاصیت border-style چهار مقدار داشته باشد:
-
border-style: dotted solid double dashed;
- حاشیه بالا dotted است
- حاشیه راست solid است
- حاشیه زیرین double است
- حاشیه چپ dashed است
اگر خاصیت border-style سه مقدار داشته باشد:
-
border-style: dotted solid double;
- حاشه بالا dotted است
- حاشیه های چپ و راست solid هستند
- حاشیه زیرین double است
اگر خاصیت border-style دو مقدار داشته باشد:
-
border-style: dotted solid;
- حاشیه های بالا و پایین dotted هستند
- حاشیه های راست و چپ solid هستند
اگر خاصیت border-style یک مقدار داشته باشد:
-
border-style: dotted;
- هر چهار حاشیه dotted هستند
توضیحاتی که در بالا برای خاصیت border-style داده شد، برای خاصیت های border-width و border-color نیز صدق می کند.
border ها در CSS - خاصیت مختصر نویسی (shorthand)
همان طور که در مثال های بالا مشاهده کردید، خاصیت های زیادی برای مشخص کردن حاشیه یک عنصر HTML وجود دارد و باید کدنویسی زیادی برای تعیین حاشیه یک عنصر انجام داد.
برای کوتاه شدن کد نویسی، میتوان تمام خصوصیات مربوط به حاشیه را در یک ویژگی جمع کرد.
برای مختصر نویسی کد های حاشیه می توان از خاصیت border استفاده کرد. ترتیب نوشتن مقادیر مختلف حاشیه ها برای صفت border به صورت زیر است:
border-width-
border-style(ضروری) border-color
شما همچنین میتوانید تمام مقادیر حاشیه را تنها برای یک سمت دلخواه به صورت زیر بکار ببرید:
حاشیه چپ
border-left: 6px solid red;
background-color: lightgrey;
}
نتیجه:
Some text
حاشیه زیرین
border-bottom: 6px solid red;
background-color: lightgrey;
}
نتیجه:
Some text
خاصیت border-radius در CSS
از خاصیت border-radius برای گرد کردن گوشه های حاشیه استفاده می شود:
حاشیه معمولی
حاشیه گرد
حاشیه گرد تر
گرد ترین حاشیه
نکته: خاصیت border-radius در IE8 و نسخه های پایین تر از آن پشتیبانی نمی شود.