سی ایس ایس کا کیرنر تصویر

سی ایس ایس کا کیرنر تصویر

CSS کا استعمال کرکے border-image خصوصیات، جو تصویر کو ایک عنصر کے گرد بوردر کے طور پر استعمال کرسکتے ہیں.

CSS border-image خصوصیت

CSS border-image خصوصیت آپ کو اس تصویر کو استعمال کریں یا نہیں، جو معمولی بوردر کا احاطہ کرتی ہے، کا معین کرتی ہے.

اس خصوصیت کے تین حصو ہیں:

  • بوردر کے طور پر استعمال کی جانے والی تصویر
  • تصویر کی جگہ کا کٹنا
  • تینار کردیا جائے یا نہیں کردیا جائے

ہم اس تصویر کو استعمال کریں گے ("border.png")

border-image خصوصیت تصویر کو قبول کرتی ہے، اس کو 9 حصو میں تقسیم کرتی ہے، جیسا کہ چٹان کا کھیل. بعد میں، کونوں پر کونوں کو رکھتا ہے اور وسطی حصو کو تینار یا تکرار کردیا جاتا ہے.

توجہ:کوئی بھی کا استعمال کریں تاکہ 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 بوردر تصویر - مختلف کٹنے کی اقدار

مختلف کٹنے کی اقدار بوردر کی جگہ کو پورا طور پر تبدیل کردیں:

مثال 1:

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

مثال 2:

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

مثال 3:

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

خود کا تجربہ کریں

CSS بوردر تصویر خصوصیت

خصوصیت وصف
border-image تمام border-image-* حصو کا لاتین کا حصہ اس کا مختصر نمونہ ہے.
border-image-source مخصوص کا سائیڈ بوردر کی تصویر کا راستہ.
border-image-slice کامپوزیشن کو کس طرح کیوں کیوں کرا کر کا قیاس کرتا ہے۔
border-image-width کامپوزیشن کی باؤنڈنگ کی شرح کا قیاس کرتا ہے۔
border-image-outset کامپوزیشن کا باؤنڈنگ بکس کے باہر کی کیونکتی کا قیاس کرتا ہے۔
border-image-repeat کامپوزیشن کو تکرار، کونر، یا تیار کرنا کا قیاس کرتا ہے۔