همانطور که در صفحات قبل مشاهده کردید، هنگام کار با مرزها در CSS، ویژگیهای مختلفی مانند border-width، border-style و border-color وجود دارند که باید تنظیم شوند.
برای سادهتر کردن کدنویسی، میتوان همه این ویژگیها را بهصورت خلاصهشده در یک ویژگی واحد به نام border تعریف کرد.
ویژگی border در واقع ترکیبی از سه ویژگی زیر است:
border-width – ضخامت مرزborder-style – سبک مرز (الزامی)border-color – رنگ مرز
p {
border: 5px solid red;
}
نتیجه: یک عنصر با مرزی قرمز، صاف و به ضخامت ۵ پیکسل در همه طرفها
علاوه بر تعریف کلی، میتوان ویژگیهای مرز را فقط برای یک طرف خاص نیز بهصورت خلاصهشده تنظیم کرد.
p {
border-left: 6px solid red;
}
نتیجه: مرز قرمز، صاف و به ضخامت ۶ پیکسل فقط در سمت چپ عنصر
p {
border-bottom: 6px solid red;
}
نتیجه: مرز قرمز، صاف و به ضخامت ۶ پیکسل فقط در پایین عنصر
استفاده از ویژگیهای خلاصهشده باعث کاهش حجم کد و افزایش خوانایی آن میشود، بهویژه زمانی که بخواهید چند ویژگی مرز را همزمان برای یک یا چند طرف تنظیم کنید.
این محتوا کاملا رایگان توسط تیم کدلپر ترجمه شده و در اختیار شما کاربران عزیز قرار گرفته است، هر گونه کپی برداری برای مقاصد غیر رایگان و بدون ذکر منبع، مورد پیگیری قانونی قرار میگیرد.
ترجمه شده از منبع: courses