کادر تصاویر

از ویکی‌کد، دانشنامهٔ برنامه‌نویسی
پرش به ناوبری پرش به جستجو
Main Page Tutorial
Css-menu.jpg
موارد آموزشی
CSS پیشرفته
۱گوشه‌های گرد
۲کادر تصاویر
۳پس‌زمینه‌ها
۴رنگ‌ها
۵Gradientها
۶سایه‌ها
۷افکت‌های متن
۸قلم‌های وب
۹2D Transforms
۱۰3D Transforms
۱۱Transitions
۱۲انیمیشن‌ها
۱۳Tooltip
۱۴استایل‌دهی تصاویر
۱۵ویژگی object-fit
۱۶دکمه‌ها
۱۷مثال‌های صفحه‌بندی (Pagination)
۱۸ستون‌های متعدد
۱۹رابط کاربری
۲۰متغیرها
۲۱Box Sizing
۲۲Flexbox
۲۳Media Queries
۲۴مثال‌های Media Queries
واکنش‌گرایی
Grid در CSS
مثال‌ها
مرجع‌ها

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

ویژگی border-image در CSS

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

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

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

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

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

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

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

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

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

مثال
1 #borderimg {
2   border: 10px solid transparent;
3   padding: 15px;
4   border-image: url(border.png) 30 round;
5 }


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

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

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

مثال
1 #borderimg {
2   border: 10px solid transparent;
3   padding: 15px;
4   border-image: url(border.png) 30 stretch;
5 }


نکته: ویژگی 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;

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

مثال
 1 #borderimg1 {
 2   border: 10px solid transparent;
 3   padding: 15px;
 4   border-image: url(border.png) 50 round;
 5 }
 6 
 7 #borderimg2 {
 8   border: 10px solid transparent;
 9   padding: 15px;
10   border-image: url(border.png) 20% round;
11 }
12 
13 #borderimg3 {
14   border: 10px solid transparent;
15   padding: 15px;
16   border-image: url(border.png) 30% round;
17 }


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

ویژگی‌های تصویر کادر (به انگلیسی: Border Image) در CSS

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


منابع آموزشی