کادر تصاویر

از ویکی‌کد، دانشنامهٔ برنامه‌نویسی
پرش به ناوبری پرش به جستجو

با ویژگی border-image در CSS، می‌توانید از یک تصویر به عنوان کادر دور یک عنصر استفاده کنید.[۱]

ویژگی border-image در CSS

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

این ویژگی سه بخش دارد:

  1. تصویر برای استفاده به عنوان کادر
  2. محل برش عکس
  3. تعریف اینکه قسمت‌های میانی می‌بایست تکرار یا کشیده شوند

ما از تصویر زیر استفاده خواهیم کرد (نام تصویر "border.png"):

ویژگی border-image تصویر را دریافت می‌کند و آن را به ۹ بحش تقسیم می‌کند، همانند یک برد tic-tac-toe. سپس گوشه‌های آن را در گوشه ها قرار داده، و قسمت‌های میانی برساس انتخاب شما، تکرار یا کشیده می‌شوند.

نکته: برای کار کردن ویژگی border-image، می‌بایست ویژگی border نیز تنظیم شود.

در این مثال، قسمت‌های میانی تصویر که تکرار می شوند تا کادر را بسازند:

استفاده از تصویر به عنوان کادر!

در اینجا کد مربوطه قرار دارد :

مثال

#borderimg {
  border: 10px solid transparent;
  padding: 15px;
  border-image: url(border.png) 30 round;
}


در این مثال، قسمت‌های میانی تصویر کشیده می شوند تا کادر را ایجاد کنند:

استفاده از تصویر به عنوان کادر!

در اینجا کد مربوطه وجود دارد :

مثال

#borderimg {
  border: 10px solid transparent;
  padding: 15px;
  border-image: url(border.png) 30 stretch;
}


نکته: ویژگی border-image در حقیقت یک ویژگی مختصر برای ویژگی‌های border-image-source،border-image-slice،border-image-width، border-image-outset و border-image-repeat است.

ویژگی border-image - مقادیر برشی مختلف

مقادیربرشی (slice) متفاوت ظاهر کادر را به طول کامل تغییر می‌دهند:

مثال ۱:

border-image: url(border.png) 50 round;

مثال ۲:

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

مثال ۳:

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

در اینجا کد مربوطه وجود دارد :

مثال

#borderimg1 {
  border: 10px solid transparent;
  padding: 15px;
  border-image: url(border.png) 50 round;
}

#borderimg2 {
  border: 10px solid transparent;
  padding: 15px;
  border-image: url(border.png) 20% round;
}

#borderimg3 {
  border: 10px solid transparent;
  padding: 15px;
  border-image: url(border.png) 30% round;
}


خود را با تمرین ها امتحان کنید!

ویژگی‌های تصویر کادر (Border Image) در CSS

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

منابع آموزشی