CSS - حاشیه‌های فردی (Border Sides)
در CSS، می‌توانید برای هر طرف از عنصر (بالا، راست، پایین و چپ) حاشیه‌های متفاوتی را مشخص کنید. برای این کار، ویژگی‌های جداگانه‌ای وجود دارد که می‌توانید از آن‌ها استفاده کنید.
مثال:
p {
border-top-style: dotted;
border-right-style: solid;
border-bottom-style: dotted;
border-left-style: solid;
}نتیجه:
- حاشیه‌های مختلف با سبک‌های متفاوت
این مثال نتیجه مشابهی با کد زیر دارد:
مثال:
p {
border-style: dotted solid;
}نحوه کارکرد:
نحوه کارکرد:
-
اگر ویژگی
border-styleدارای چهار مقدار باشد:border-style: dotted solid double dashed;- حاشیه بالا: نقطه‌ای
- حاشیه راست: پیوسته
- حاشیه پایین: دوگانه
- حاشیه چپ: خط‌دار
-
اگر ویژگی
border-styleدارای سه مقدار باشد:border-style: dotted solid double;- حاشیه بالا: نقطه‌ای
- حاشیه راست و چپ: پیوسته
- حاشیه پایین: دوگانه
-
اگر ویژگی
border-styleدارای دو مقدار باشد:border-style: dotted solid;- حاشیه‌های بالا و پایین: نقطه‌ای
- حاشیه‌های راست و چپ: پیوسته
-
اگر ویژگی
border-styleدارای یک مقدار باشد: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;
}ویژگی border-style در مثال‌های بالا استفاده شده است. اما این ویژگی همچنین با border-width و border-color نیز کار می‌کند.
برای ارسال نظر لطفا ابتدا وارد حساب کاربری خود شوید. صفحه ورود و ثبت نام