ویژگی CSS: مرز

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

نحو

نحو برای border دارایی نسبتاً ساده است. می‌توانید آن را با استفاده از علامت کوتاه تنظیم کنید یا سبک، عرض و رنگ حاشیه را به‌صورت جداگانه تعریف کنید. بیایید به یک مثال نگاه کنیم:

1

.element {

2

  border: 2px solid #000;

3

}

در این مثال، ما یک حاشیه با عرض 2 پیکسل، یک خط یکپارچه و رنگ مشکی (000#) قرار داده ایم. به طور پیش فرض، border خاصیت استایل مرزی را به none، عرض به mediumو رنگ به رنگ متن فعلی. این برای اکثر عناصر، از جمله عناصر سطح بلوک و سطح درون خطی اعمال می شود. با این حال، به خاطر داشته باشید که برخی از عناصر، مانند تصاویر و کنترل‌های فرم، یک استایل حاشیه از پیش تعریف شده دارند.

این border ویژگی ارثی نیست، به این معنی که به فرزندان عنصر منتقل نمی شود. در مورد انیمیشن‌های CSS، بله، می‌توانید آن‌ها را متحرک کنید border دارایی با استفاده از فریم های کلیدی و انتقال ها، اضافه کردن برخی حرکت های لذت بخش به مرزهای شما!

مثال

در این دمو با ویژگی های حاشیه جدا شده بازی کنید:

سبک های مرزی

اکنون، بیایید سبک های مختلف حاشیه ای را که می توانید با آن به دست آورید، بررسی کنیم border ویژگی. هر سبک جذابیت منحصر به فرد خود را دارد و می توان از آن برای ایجاد جلوه های بصری مختلف استفاده کرد. ما متداول ترین سبک های مورد استفاده و چند مورد آزمایشی را پوشش خواهیم داد (اگرچه ممکن است هنوز به طور گسترده پشتیبانی نشوند).

جامد

این solid سبک یک خط ساده و پیوسته ایجاد می کند که عرض حاشیه را در بر می گیرد. مثل کشیدن یک خط با یک خودکار است. برای مشاهده عملکرد، قطعه کد زیر را بررسی کنید:

1

.element {

2

  border: 1px solid #f00;

3

}

خط چین

اگر حاشیه ای می خواهید که شبیه ردیفی از نقاط با فاصله مساوی باشد، dotted سبک برای شما مناسب است مثل این است که نقاط را با مداد خود به هم وصل کنید. در اینجا یک مثال است:

1

.element {

2

  border: 2px dotted #00f;

3

}

نقطه چین

با dashed سبک، شما می توانید به یک حاشیه متشکل از خط تیره های کوتاه دست پیدا کنید. مثل ایجاد ردپایی در آن سوی مرز است. آن را امتحان کنید:

1

.element {

2

  border: 3px dashed #0f0;

3

}

دو برابر

این double سبک یک مرز با دو خط موازی ایجاد می کند. مثل داشتن یک حصار با دو لایه سیم است. به این مثال توجه کنید:

1

.element {

2

  border: 4px double #f90;

3

}

شیار

این groove سبک ظاهری سه بعدی به حاشیه می دهد و آن را شبیه یک شیار حک شده می کند. این مانند عمق بخشیدن به طراحی شما است. در اینجا نحوه استفاده از آن آورده شده است:

1

.element {

2

  border: 5px groove #909;

3

}

ارزش های اضافی

چند سبک حاشیه اضافی وجود دارد که ممکن است بخواهید آنها را امتحان کنید:

• ridge: حاشیه ای ایجاد می کند که برجسته به نظر می رسد.
• inset: حاشیه ای ایجاد می کند که به صورت جاسازی شده به نظر می رسد.
• outset: حاشیه ای ایجاد می کند که به صورت برجسته و برجسته به نظر می رسد.

بیشتر بدانید

آیا می‌دانستید که می‌توانید سبک‌های حاشیه متفاوتی را در هر طرف یک عنصر با استفاده از عبارت اعمال کنید border-top، border-right، border-bottom، و border-left خواص؟ این به شما این امکان را می دهد که ترکیب های حاشیه منحصر به فردی ایجاد کنید و به طرح های خود عمق دهید. با خیال راحت این تکنیک را کشف کنید و خلاقیت خود را آزاد کنید!

«مرزها مانند قاب یک نقاشی هستند که محتوای درون را تقویت و به نمایش می‌گذارند. قدرت حاشیه های خوش ساخت برای ارتقای طرح های خود را دست کم نگیرید. – لیا ورو

آموزش های مربوطه

برای تقویت بیشتر درک خود از border ویژگی و کاربردهای آن، این آموزش های مفید را بررسی کنید:

1. CSS Refreshers: Borders

مشخصات رسمی و سازگاری مرورگر

امیدواریم این مستندات دانش و الهام بخشی را برای ایجاد طرح های حاشیه خیره کننده در اختیار شما قرار داده باشد. یک ظاهر طراحی مبارک!