دوره های آموزشی آکادمی پی وی لرن (پروژه محور و ویژه بازار کار)



  • ۱
  • آبان

جلسه ۴۰ : خصوصیت border-image در CSS

  • دسته‌بندی‌ها :
جلسه ۴۰ : خصوصیت border-image در CSS
    • جزئیات
    • نوع محتواآموزش تصویری

      مقدمه

      با عرض سلام و وقت بخیر خدمت کاربران سایت پی وی لرن . و کاربرانی که دوره کامل آموزش CSS را دنبال می کنند. گاهی ممکن است که شما بخواهید همانند قاب عکس ها در دنیای واقعی برای تصویر یا عناصر موجود در وب سایت خود یک نوع قاب در Style آن تعریف کنید، شما می توانید یک الگوی خاص را به border-image در CSS اعمال کرده و از این راه یک قاب زیبا برای تصویر مودر نظر ایجاد کنید. کافیست طرز کار با خصوصیت border-image در CSS را بدانید، برای آشنایی بیشتر با چگونگی تعریف یک الگو برای border-image در CSS در ادامه ی این مباحث با ما همراه باشید.

      تعریف الگو برای border-image در CSS

      در ادامه ی این آموزش به آشنایی با خصوصیت border-image در CSS به منظور تعریف یک الگو برای border-image در CSS می پردازیم.

      آشنایی با خصوصیت border-image در CSS

      خصوصیت border-image در CSS به شما اجازه می دهد تا از یک عکس ساده به عنوان یک الگو به جای border معمولی استفاده کنید.

      این خصوصیت شامل سه بخش زیر است:

      ۱- عکس (image) که برای تعریف border استفاده می شود.

      ۲- محل گرفتن عکس الگو.

      ۳- تعیین اینکه تصویر الگو در بخش میانی border باید تکرار شود یا خیر.

      نکته : برای کارکردن border-image باید ویژگی border را نیز در عنصر مربوطه تنظیم کنید.

      مثال زیر یک الگوی عکس را دو عنصر مربوطه تکرار می کند:

      ویژگی borderimage

      مثال : خصوصیت border-image
      خودتان امتحان کنید »

      مثال-۲ : در این مثال الگوی عکس قبلی بدون تکرار در border عنصر قرار می گیرد:

      حالت دیگر borderimage

      مثال : خصوصیت border-image نمونه -2
      خودتان امتحان کنید »

      نکته : ویژگی border-image خود شامل ویژگی های زیر است:

      • border-image-source
      • border-image-slice
      • border-image-width
      • border-image-outset
      • border-image-repeat

      تغییر اندازه و مقدار چرخش الگو

      کدهای زیر هر کدام الگوهای متفاوتی را در اطراف یک عنصر ظاهر می کند:

      • border-image: url(border.png) 50 round;
      • border-image: url(border.png) 20% round;
      • border-image: url(border.png) 30% round;

      الگوی چرخش

      مثال:

      مثال : تغییر مقادیر ویژگی border-image
      خودتان امتحان کنید »

      خصوصیات ویژگی border-image در CSS

      خصوصیتتوضیحات
      border-imageاین یک خصوصیت مختصر برای تنظیم تمام خصوصیات  *-border-image است.
      border-image-source مسیر تصویری را مشخص می کند که به عنوان یک الگو استفاده می شود.
      border-image-sliceنحوه برش تصویر الگو را مشخص می کند.
      border-image-widthعرض تصویر الگو را مشخص می کند.
      border-image-outsetمیزان مشخصی را که منطقه ی تصویر الگو آن را فراتر از box الگو می گذارد را تعیین می کند.
      border-image-repeatمشخص می کند که آیا تصویر الگو باید تکرار شود، گرد و یا کشیده شود.

      کلام آخر

      در جلسات قبلی با تعریف استایل border عناصر مختلف آشنا شدیم که فقط می توانستیم یک border ساده با یک رنگ خاص تعریف کنیم، اما با معرفی خصوصیت  border-image در CSS امکان تعریف انواع تصاویر به عنوان border و قاب دور عناصر html فراهم شده است.

      QR:  جلسه ۴۰ : خصوصیت border-image در CSS
      به اشتراک بگذارید


      دیدگاه کاربران
      1. تصویر کاربر