آموزش کار با ویژگی Border-Image در CSS

سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش کار با ویژگی Border-Image در CSS با من همراه باشید.

آموزش کار با ویژگی Border-Image در CSS

Free-Learn

کار با ویژگی Border-Image در CSS

در جلسات قبلتر از سایت آموزشی فری لرن و در سری آموزش های قدم به قدم زبان CSS من بطور کامل آموزش کار با بوردرها یا Border را در CSS ارائه دادم.

که پیشنهاد میکنم حتما اون جلسه رو از طریق لینک زیر مشاهده و مطالعه نمایید.

لطفا با کلیک بروی آموزش کار با حاشیه ها یا Borders در CSS این آموزش را مشاهده نمایید.

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

Free-Learn

آموزش کار با ویژگی Border-Image در CSS

ویژگی border-image هم همانند دیگر ویژگی های زبان CSS دارای یکسری مقادیر می باشد، که این مقادیر به شرح زیر می باشند :

  • border-image-source : مسیر تصویر را مشخص میکند
  • border-image-slice : نحوه برش زدن تصویر را مشخص میکند
  • border-image-width : اندازه عرض تصویر بوردِر مشخص میکند
  • border-image-outset : فضا یا فاصله اضافی خارج از باکس را مشخص میکند
  • border-image-repeat : مشخص میکند که تصویر باید تکرار شود یا خیر

که در ادامه تمامی موارد بالا را آموزش خواهم داد و برای هر یک از آنها نیز مثال آنلاین ارائه خواهم داد، لطفا در ادامه و تا پایان این بخش با من همراه باشید.

نکته : تصویری که در ادامه باهاش کار میکنیم تصویر زیر می باشد. (در واقع این تصویر می باشد که به دور لبه های عنصر کشیده می شود)

آموزش کار با ویژگی Border-Image در CSS

در برخی موارد این ویژگی در گوشی های موبایل عمل نمیکند، برای اینکه این ویژگی در گوشی های موبایل بدون مشکل عمل کند باید از ویژگی border استفاده کرده باشید.

Free-Learn

ویژگی border-image-source

با استفاده از این ویژگی میتوان محل / آدرس مسیر فایل تصویر را مشخص کرد، تصویری که قرار است به عنوان بوردِر به دور لبه های یک عنصر کشیده شود.

امتحان کنید

Free-Learn

ویژگی border-image-slice

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

مثال شماره ۱ : استفاده از عدد

امتحان کنید

مثال شماره ۲ : استفاده از درصد

امتحان کنید

Free-Learn

ویژگی border-image-width

همانطور که از این ویژگی مشخصه ما با استفاده از آن میتوانیم اندازه تصویر بوردِر را مشخص نماییم.

امتحان کنید

Free-Learn

ویژگی border-image-outset

با استفاده از این ویژگی نیز میتوان مشخص کرد که تصویر بوردِر فراتر از باکس عنصر باشد. (بوردر از باکس عنصر بزند بیرون)

امتحان کنید

Free-Learn

ویژگی border-image-repeat

با استفاده از این ویژگی نیز میتوان مشخص کرد که حالت نمایش تصویر بوردِر چگونه باشد، مثلا تصویر بصورت کاشی وار تکرار شود یا مثلا بصورت گرد شده یا بصورت کشیده نمایش داده شود.

مثال شماره ۱ : حالت تکرار ( repeat )

امتحان کنید

مثال شماره ۲ : حالت گرد ( round )

امتحان کنید

مثال شماره ۳ : حالت کشیده (  )

امتحان کنید

Free-Learn

خلاصه نویسی ویژگی border-image

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

حال با استفاده از خلاصه نویسی ، دیگه لازم نیست بیایم و بصورت تک تک و مجزا دستورات رو بنویسیم، بلکه کافیه از ویژگی border-image بصورت خلاصه نویسی استفاده کرد.

شکل کلی این ویژگی در حالت خلاصه نویسی بصورت زیر می باشد : (۳ قسمت دارد)

  • border-image-source
  • border-image-slice
  • border-image-repeat

مثال :

امتحان کنید

Free-Learn

دریافت PDF یا پرینت این مطلب