٪۴۰ تخفیف تابستانه شروع شد! بزرگترین حراج سال ما

به ما بپیوندید

آموزش تصاویر حاشیه ای CSS

ویژگی CSS-border-image border-imageخاصیت CSS به شما امکان می دهد تصویری را تعیین کنید که به جای حاشیه طبیعی اطراف یک عنصر مورد استفاده قرار گیرد. این ملک سه قسمت دارد: تصویری که به عنوان حاشیه استفاده می شود کجا می توان تصویر…

محمد یوسفی

13 جولای 2021

ویژگی CSS-border-image

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

این ملک سه قسمت دارد:

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

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

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

توجه: برای 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خواص است.


CSS-border-image – مقادیر مختلف برش

مقادیر مختلف برش ظاهر حاشیه را کاملاً تغییر می دهد:

مثال

#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;
}

منبع

مطالب مرتبط

0 0 رای ها
امتیازدهی به مقاله
اشتراک در
اطلاع از
guest
0 نظرات
بازخورد (Feedback) های اینلاین
مشاهده همه دیدگاه ها