50درصد تخفیف سورس فروشگاهی دیجی کالا + اپلیکیشن اندروید تا پایان این هفته - کد تخفیف : off50
با تخفیف میخرم

آموزش CSS – ویژگی Border در CSS

  • آپدیت شده در تاریخ

آموزش CSS

در جلسه قبل از آموزش CSS با حاشیه داخلی یا Padding در CSS آشنا شدید. در این بخش قصد داریم شما را با ویژگی Border در CSS آشنا کنیم.

Border یک المان، اندازه و رنگ حاشیه مربوط به آن المان را مشخص می کند.

ویژگی Border در CSS :

ویژگی Border در CSS به شما اجازه می دهد حاشیه یک جعبه را تعریف نمایید. همانطور که می دانید Border می تواند استایل از قبل تعریف شده ای داشته باشد یا از یک تصویر استفاده کند.

در این بخش در مورد خصوصیت Border صحبت خواهیم کرد. پس همراه ما باشید.

خصوصیت border-width:

این خصوصیت عرض ناحیه Border را مشخص می کند. این یک خصوصیت مختصرنویسی شده برای تنظیم ضخامت هر چهار طرف حاشیه المان در یک زمان واحد است.

به مثال زیر توجه کنید:

نکته: اگر مقدار خصوصیت border-width وجود نداشته باشد یا اصلا مشخص نشده باشد، مقدار پیش فرض یعنی متوسط برای آن مورد استفاده قرار می گیرد.

خصوصیت border-style:

خصوصیت border-style استایل و سبک حاشیه جعبه را تنظیم می کند. این یک خصوصیت مختصر نویسی شده برای تنظیم سبک خطوط برای هر چهار طرف المان است.

به خاطر داشته باشید که این خصوصیت یکی از مقادیر زیر را اتخاذ می کند:

none: حاشیه ای نخواهد داشت.

hidden: حاشیه پنهانی را تعریف می کند.

dotted: حاشیه نقطه چین را تعریف می کند

dashed: حاشیه خط چین را تعریف می کند

solid: حاشیه ای با خط ممتد را تعریف می کند.

: double دو حاشیه تعریف می کند. عرض دو حاشیه با مقدار border-width یکسان است.

groove: حاشیه سه بعدی تعریف می کند. این افکت به مقدار Border-color بستگی دارد.

ridge: در این حالت خطوط حاشیه به صورت سه بعدی تعریف می شوند

inset:حاشیه داخلی سه بعدی تعریف می کند

outset: حاشیه خارجی سه بعدی تعریف می کند

خصوصیت border-color:

این خصوصیت رنگ حاشیه جعبه را مشخص می کند. این نیز یک خصوصیت مختصر نویسی شده برای تنظیم رنگ تمامی چهار طرف حاشیه المان است.

نکته: خصوصیت border-color اگر به تنهایی به کار رود کار نخواهد کرد. از خصوصیت border-style برای تنظیم حاشیه استفاده کنید.

خصوصیت مختصر نویسی border:

خصوصیت Border یک خصوصیت مختصر نویسی شده برای تنظیم یک یا چند خصوصیت فردی حاشیه است.

اگر مقدار برای خصوصیت فردی حاشیه حذف شده یا مشخص نشده باشد، مقدار پیش فرض برای آن خصوصیت مورد استفاده قرار خواهد گرفت.

نکته: اگر مقدار خصوصیت border-color، حذف شده یا مشخص نشده باشد، خصوصیت رنگ المان به عنوان مقداری برای خصوصیت Border-color مورد استفاده قرار خواهد گرفت.

اما در مورد خصوصیت border-style حذف کردن مقدار باعث می شود اصلا حاشیه ای نمایش داده نشود.

 

امیدوارم در این بخش آموزش CSS, از ویژگی Border در CSS نهایت استفاده را برده باشید.

در بخش بعدی با Outline در CSS آشنا می شویم.

هر سوالی داشتید ، از قسمت نظرات ارسال کنید . سریعا ، پاسخگوی سوالات شما هستیم .

موفق باشید.

حسن شفیعی علاقه خاصی به برنامه نویسی وب و موبایل دارم و هر روز تلاش می کنم به این حوزه مسلط تر شوم و اطلاعاتم را به شکل کاربردی برای علاقه مندان در وب به اشتراک بگذارم
برچسب ها : ,

آموزش های رایگان بیشتر در اینستاگرام ما ...

NETPARADIS /
مطالب زیر را حتما بخوانید
دیدگاه کاربران

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

    دوره های آموزشی

    می خواهید صفر تا صد HTML,CSS را یاد بگیرید ؟

    50% تخفیف ویژه
    فقط 144 هزار تومان

    برای دریافت آموزش طراحی سایت با پروژه قالب فروشگاه روی دکمه زیر بزنید
    می خواهم طراحی سایت را یاد بگیرم
    close-link