کادرها در CSS (Borders)
در این بخش با «کادرها در CSS» آشنا می شوید. ویژگی های کادر اجازه می دهند سبک، عرض و رنگ مرز هر عنصر را تعیین کنید. ابتدا با سبک ها شروع می کنیم و سپس به نمونه ها می رسیم.
سبک کادرها در CSS
ویژگی border-style مشخص می کند چه نوع کادری نمایش داده شود. گزینه های مجاز عبارت اند از: dotted، dashed، solid، double، groove، ridge، inset، outset، none و hidden. همچنین می توانید برای هر چهار سمت، یک تا چهار مقدار بنویسید.
نمونه سبک های مختلف
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; }نکته: تا زمانی که border-style را تنظیم نکنید، سایر ویژگی های کادر اثری نخواهند داشت.
ترکیب چندمقداری برای چهار سمت
p.mix { border-style: dotted dashed solid double; }با چهار مقدار، به ترتیب برای بالا، راست، پایین و چپ سبک جداگانه تعیین می کنید. بنابراین کنترل دقیقی روی هر سمت خواهید داشت.
ادامه یادگیری کادرها در CSS
برای کامل شدن در «کادرها در CSS»، این مباحث را نیز ببینید: عرض کادر (border-width)، رنگ کادر (border-color) و کادرِ کناره ها. همچنین برای نوشتن سریع تر، سراغ کوتاه نویسی کادر بروید و برای گوشه های گرد، صفحه حاشیه گرد را بررسی کنید. برای ارجاع سریع، کادرها در CSS را نشان کنید.
راهنمای border-style در MDN را برای جزئیات بیشتر بخوانید. همچنین مشخصات رسمی را در استاندارد W3C ببینید.