انواع وب سایت از نظر فنی
انواع وب سایت از نظر فنی
22/11/1395
ویژگی های سایت رتبه اول گوگل
ویژگی های سایت رتبه اول گوگل
23/11/1395
نمایش همه

کاربرد border-image در CSS

کاربرد border-image در CSS

آشنایی با کاربرد border-image در CSS

مطالب بسیاری در رابطه با کاربرد border-image در CSS موجود میباشد اما تعداد کتری از آن ها کاربردی میباشند. میتوانید با استفاده از این مقاله نحوه ایجاد یک تمبر پستی از یک تصویر ساده را یاد بگیرید. اما قبل از هر چیز هدف از انجام اینمار برای  شما شرح میدهیم اکثرا روی پاکت نامه ها بیشتر از یک تمبر مشاهده میکنید ولی اگر قصد داشته باشید که آن ها را در صفحه وب نشان دهد میتوانید عکس را به تمبر تبدیل کرده و. با برای آنکه در طراحی سایت انعطافی باشد، Border مورد نظر را بسازید. راه های زیادی برای ساختن آن وجود دارد ولی ما اینجا از یک صفحه در ابعاد ۳۰*۳۰ پیکسل به همراه یک ماسک ساده که هر کدام از آن ها در لبه قرار میگیرند استفاده میکنیم.

کاربرد border-image در CSS

حالا از عکس png به عنوان border-image استفاده می کنیم:

.stamp { width: 200px; height: 148px; border-image: url(stamp-border.png) 8; border-width: 8px; }

کاربرد border-image در CSS

به علت آنکه ابعاد ضلع ها یکسان می باشد، میتوانید از راه میانبر نیز استفاده کنید و متوجه خواهید شد که در حالت دیفالت هر ضلع به شکل stretched یعنی کشیده شده در می آید. اما به جای استفاده از این، ما می خواهیم که pattern هر ضلع بصورت کامل تکرار شود. دستور کامل به شکل زیر میباشد :

.stamp { width: 200px; height: 148px; border-image: url(stamp-border.png) 8 round; border-width: 8px; border-style: solid}

 

کاربرد border-image در CSS
برای آنکه دستور بالا در مرورگر فایرفاکس اجرا شود باید یک border-width تعریف کنید و همینطور یک border-style. حتی در صورنی که از قبل موجود بوده و Style بوسیله عکس تعیین شده