همانطور که در مثالهای صفحات قبل دیدید، در CSS میتوان برای هر طرف یک عنصر، مرزی متفاوت تعریف کرد.
برای این منظور، CSS ویژگیهایی جداگانه برای هر طرف مرز ارائه میدهد:
border-top-style – سبک مرز بالاborder-right-style – سبک مرز راستborder-bottom-style – سبک مرز پایینborder-left-style – سبک مرز چپp {
border-top-style: dotted;
border-right-style: solid;
border-bottom-style: dotted;
border-left-style: solid;
}
🔹 نتیجه: هر طرف عنصر دارای سبک مرز متفاوتی خواهد بود.
برای راحتی بیشتر، میتوان از ویژگی خلاصهشده border-style استفاده کرد تا همان نتیجه حاصل شود.
p {
border-style: dotted solid;
}
نتیجه: همانند مثال قبلی، مرز بالا و پایین نقطهچین، و مرز چپ و راست خط صاف خواهد بود.
در ادامه توضیح داده میشود که اگر ویژگی border-style دارای یک تا چهار مقدار باشد، چگونه اعمال میشود:
border-style: dotted solid double dashed;
dotted)solid)double)dashed)
border-style: dotted solid double;
border-style: dotted solid;
border-style: dotted;
/* چهار مقدار */
p {
border-style: dotted solid double dashed;
}
/* سه مقدار */
p {
border-style: dotted solid double;
}
/* دو مقدار */
p {
border-style: dotted solid;
}
/* یک مقدار */
p {
border-style: dotted;
}
📘 استفاده از نوشتار کوتاهتر باعث سادهتر شدن کدنویسی و خوانایی بهتر CSS میشود، بهویژه زمانی که بخواهید چند ویژگی را همزمان تنظیم کنید.
این محتوا کاملا رایگان توسط تیم کدلپر ترجمه شده و در اختیار شما کاربران عزیز قرار گرفته است، هر گونه کپی برداری برای مقاصد غیر رایگان و بدون ذکر منبع، مورد پیگیری قانونی قرار میگیرد.
ترجمه شده از منبع: courses