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

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

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

آموزش CSS

در جلسه قبل از آموزش CSS با اعتبارسنجی CSS آشنا شدید. در این بخش قصد داریم به ویژگی border در CSS3 یپردازیم.

با ویژگی border در CSS3 می توانید تصاویر را به عنوان حاشیه دور المان قرار بدید.

استفاده از border در CSS3

CSS3 دو ویژگی جدید برای استایل دهی بیشتر border المان ها ارایه داده است.

ویژگی border-image برای افزودن عکس به border ها و ویژگی border-radius برای گرد کردن گوشه ها بدون استفاده از تصویر معرف کرده است.

بخش زیر ویژگی border در CSS3 را توضیح می دهد, برای دیگر ویژگی های مربوط به border آموزش border در css را مطالعه بفرمایید

ساخت گوشه های گرد با CSS3

خصوصیت border-radius می تواند برای ساخت گوشه های گرد استفاده شود.

این ویژگی شکل گوشه لبه حاشیه خارجی (border) را تعریف می کند. قبل از CSS3 , تصاویر بریده شده برای ساخته این گوشه ها استفاده می شد.

اضافه کردن تصویر به border در CSS3

خاصیت border-image به شما اجازه مشخص کردن یک تصویر برای حاشیه خارجی المان را می دهد.

این خاصیت یک خاصیت چند مقداری بوده و حالت کوتاه و خلاصه شده چندین خاصیت border-image-source, border-image-width, border-image-outset و border-image-repeat است .

برای تعیین خواص فوق دو راه وجود دارد :

  1. تعیین مقدار کلیه خواص در خاصیت چند مقداری border-image .
  2. تعیین هر کدام از خواص به صورت جداگانه .

راه اول راهی بهتر و متداول است . زیرا حجم کدنویسی را کاهش داده و نظم بهتری به کد نویسی می دهد .

در روش اول در واقع باید مقدار هر کدام از خاصیت های border را به ترتیب قرار داد .

در جداول زیر به توضیح هر یک موارد بالا می پردازیم:

توضیحمعادل کوتاه نشدهخاصیت کوتاه syntax شده در
این خاصیت آدرس عکسی که قرار است به عنوان خط حاشیه مورد استفاده قرار بگیرد را تعیین می کند .
اگر مقدار آن برابر با none قرار داده شود ، هیچ عکسی به عنوان خطوط حاشیه به کار برده نمی شود .
border-image-sourcesource
این خاصیت عرض خطوط نمایش را تعیین می کند .
مقدار پیش فرض خاصیت width برایر صفر است و می تواند به یکی از ۳ حالت زیر مقدار دهی شود :

  1. مقدار عددی بر حسب pixel یا pt مثلا px 10 .
  2. مقدار بر حسب درصد مثلا % ۱۰ .
  3. قردادن مقدار برابر با auto . که باعث می شود مقدار خود را از عنصر مادر به ارث ببرد .
border-image-widthwidth
این خاصیت میزان فاصله محتویات درون عنصر با خطوط حاشیه را تعیین می کند .border-image-outsetoutset
این خاصیت تعیین می کند که اگر عکس مورد نظر برای خطوط حاشیه کوچکتر از مقدار لازم بود ، آیا برای پوشش کل ناحیه خطوط حاشیه ، تکرار ( repeat ) یا بزرگنمایی ( stretch ) شود . این خاصیت می تواند با یکی از ۳ حالت زیر مقدار دهی شود :

  1. stretch : این مقدار باعث می شود تا عکس برای پوشاندن کل ناحیه خطوط نمایش ، بزرگنمایی و کشیده تر از حالت معمولی شود .
  2. repeat : این مقدار باعث می شود تا عکس برای پوشاندن کلیه ناحیه خطوط نمایش ، به دفعات لازم تکرار شود .
  3. round : این مقدار باعث می شود تا عکس برای پوشاندن کل ناحیه خطوط نمایش ، به صورت کاشی وار ( tile ) در تمام ناحیه قرار بگیرد . به عبارت دیگر با تکرار در ۲ جهت عمودی و افقی کل فضا را پوشش خواهد داد .
border-image-repeatrepeat

 

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

در بخش بعدی با مقادیر جدید رنگ در CSS3 آشنا خواهید شد.

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

موفق باشید.

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

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

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

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

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

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

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

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