حاشیه ها (Borders)
«حاشیه (Border)» قاب دور المان است. با آن می توانیم سبک، ضخامت، و رنگ قاب را تنظیم کنیم. مثل قاب دفتر مشق که دور صفحه خط دارد.
انواع سبک حاشیه (border-style)
ویژگی «border-style» نوع خط قاب را مشخص می کند. مثلاً نقطه ای، خط چین، ساده، یا دوبل. اگر «border-style» تنظیم نشود، بقیه تنظیمات حاشیه اثر ندارند.
نمونه کد سبک های مختلف
در این کد، برای هر پاراگراف یک سبک حاشیه گذاشته ایم. «mix» چهار مقدار دارد؛ یعنی بالا، راست، پایین، چپ.
<style>
p.dotted {
border-style: dotted;
}
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;
}
</style>
<p class="dotted">A dotted border.</p>
<p class="dashed">A dashed border.</p>
<p class="solid">A solid border.</p>
<p class="double">A double border.</p>
<p class="groove">A groove border.</p>
<p class="ridge">A ridge border.</p>
<p class="inset">An inset border.</p>
<p class="outset">An outset border.</p>
<p class="none">No border.</p>
<p class="hidden">A hidden border.</p>
<p class="mix">A mixed border.</p>
نکات مهم و سریع
- می توانی تا چهار مقدار برای جهات بدهی.
- بدون «border-style» بقیه تنظیم ها بی اثرند.
- افکت های 3D به رنگ حاشیه وابسته اند.
گام های عملی
- یک المان ساده مثل <p> بساز.
- برای آن «border-style» مناسب انتخاب کن.
- در صورت نیاز رنگ و ضخامت را بعداً اضافه کن.
نکته: برای هر طرف می توانی سبک جدا بدهی؛ ترتیب مقادیر: بالا، راست، پایین، چپ.
مطالب مرتبط در سایت: حاشیه ها، ضخامت حاشیه، رنگ حاشیه، گوشه های گرد. پیشنهاد می کنم از عبارت حاشیه ها به عنوان لنگر سئو داخلی استفاده کنی.
جمع بندی سریع
- حاشیه قاب دور المان است.
- اول «border-style» را تنظیم کن.
- می توانی چهار جهت را جدا بدهی.
- افکت های سه بعدی به رنگ وابسته اند.