استفاده از تصاویر برای کادرها در CSS

استفاده از ویژگی border-image در CSS

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

1. تصویری که باید بعنوان کادر استفاده شود.

2. اینکه تصویر مورد نظر از کجا باید برش بخورد.

3. تعریف اینکه آیا بخش های میانی باید تکرار شوند یا کشیده شوند.

ما از تصویر زیر، استفاده می کنیم که نام آن border.png است:

ویژگی border-image این تصویر را می گیرد و آن را به 9 بخش تقسیم می کند؛ مانند یک بازی دوز. سپس گوشه ها را در گوشه ها قرار می دهد و بخش های وسط را تکرار می کند یا می کشد. سپس گوشه های تصویر را به گوشه ها(ی عنصر) می برد و بخش های وسط، هر طور که شما مشخص کنید، تکرار یا کشیده می شوند.

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

کدها به صورت زیر است:

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

در اینجا، بخش های میانیِ تصویر، کشیده(stretched) شده اند تا کادر ایجاد شود:

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

 کدهای این بخش، به صورت زیر هستند:

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

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

دستور border-image - مقادیر مختلف برای برش(Slice)

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

مثال 1:

border-image: url(https://sina2.ir/tryit/other/border.png) 50 round;

مثال 2:

border-image: url(https://sina2.ir/tryit/other/border.png) 20% round;

مثال 3:

border-image: url(https://sina2.ir/tryit/other/border.png) 30% round;

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

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

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

ویژگی های Border Image در CSS