طرف های حاشیه (Border Sides)
در «طرف های حاشیه (Border Sides)» می توانی برای هر ضلع قاب، سبک جدا بدهی. منظور از سبک (Style) نوع خط حاشیه است؛ مثل نقطه ای یا خطی. بنابراین کنترل کامل روی بالا، راست، پایین و چپ داری.
تنظیم جداگانه سبک هر ضلع
با ویژگی های «border-top-style»، «border-right-style»، «border-bottom-style»، «border-left-style» هر ضلع را جدا تعیین کن.
نمونه: ضلع ها با سبک های متفاوت
<style>
p.sample {
border-top-style: dotted;
border-right-style: solid;
border-bottom-style: dotted;
border-left-style: solid;
}
</style>
<p class="sample">Different Border Styles</p>
میان بر border-style برای طرف ها
می توانی همان نتیجه را با «border-style» و مقادیر چندتایی بگیری. این روش کوتاه تر است و خوانایی را بهتر می کند.
نمونه: میان بر دو مقداری
<style>
p.short {
border-style: dotted solid;
}
</style>
<p class="short">Different Border Styles</p>
تعداد مقادیر در border-style
ترتیب مقدارها همیشه بالا، راست، پایین، چپ است. اگر مقدارها کمتر شوند، طبق قانون CSS پخش می شوند.
نمونه: یک تا چهار مقدار
<style>
/* Four values */
p.four {
border-style: dotted solid double dashed;
}
/* Three values */
p.three {
border-style: dotted solid double;
}
/* Two values */
p.two {
border-style: dotted solid;
}
/* One value */
p.one {
border-style: dotted;
}
</style>
<p class="four">Four values</p>
<p class="three">Three values</p>
<p class="two">Two values</p>
<p class="one">One value</p>
نکته: همین قوانین با «border-width» و «border-color» هم کار می کنند. بنابراین می توانی پهنا و رنگ هر ضلع را هم جدا تعیین کنی.
گام های عملی سریع
- اول «border-style» پایه را مشخص کن.
- در صورت نیاز، ضلع ها را جدا مقدار بده.
- برای کد کوتاه تر، از میان بر استفاده کن.
مطالب مرتبط: حاشیه ها، عرض حاشیه، رنگ حاشیه.
جمع بندی سریع
- هر ضلع تنظیم جدا دارد.
- میان برها کد را کوتاه می کنند.
- ترتیب مقادیر: بالا، راست، پایین، چپ.
- با width و color هم مشابه است.