با عرض سلام و وقت بخیر خدمت کاربران سایت پی وی لرن . و کاربرانی که دوره کامل آموزش CSS را دنبال می کنند. گاهی ممکن است که شما بخواهید همانند قاب عکس ها در دنیای واقعی برای تصویر یا عناصر موجود در وب سایت خود یک نوع قاب در Style آن تعریف کنید، شما می توانید یک الگوی خاص را به border-image در CSS اعمال کرده و از این راه یک قاب زیبا برای تصویر مودر نظر ایجاد کنید. کافیست طرز کار با خصوصیت border-image در CSS را بدانید، برای آشنایی بیشتر با چگونگی تعریف یک الگو برای border-image در CSS در ادامه ی این مباحث با ما همراه باشید.
در ادامه ی این آموزش به آشنایی با خصوصیت border-image در CSS به منظور تعریف یک الگو برای border-image در CSS می پردازیم.
خصوصیت border-image
در CSS به شما اجازه می دهد تا از یک عکس ساده به عنوان یک الگو به جای border معمولی استفاده کنید.
این خصوصیت شامل سه بخش زیر است:
۱- عکس (image) که برای تعریف border استفاده می شود.
۲- محل گرفتن عکس الگو.
۳- تعیین اینکه تصویر الگو در بخش میانی border باید تکرار شود یا خیر.
نکته : برای کارکردن border-image
باید ویژگی border
را نیز در عنصر مربوطه تنظیم کنید.
مثال زیر یک الگوی عکس را دو عنصر مربوطه تکرار می کند:
1 2 3 4 5 | #borderimg { border: 10px solid transparent; padding: 15px; border-image: url(border.png) 30 round; } |
مثال-۲ : در این مثال الگوی عکس قبلی بدون تکرار در border عنصر قرار می گیرد:
1 2 3 4 5 | #borderimg { border: 10px solid transparent; padding: 15px; border-image: url(border.png) 30 stretch; } |
نکته : ویژگی border-image
خود شامل ویژگی های زیر است:
کدهای زیر هر کدام الگوهای متفاوتی را در اطراف یک عنصر ظاهر می کند:
مثال:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | #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; } |
خصوصیت | توضیحات |
---|---|
border-image | این یک خصوصیت مختصر برای تنظیم تمام خصوصیات *-border-image است. |
border-image-source | مسیر تصویری را مشخص می کند که به عنوان یک الگو استفاده می شود. |
border-image-slice | نحوه برش تصویر الگو را مشخص می کند. |
border-image-width | عرض تصویر الگو را مشخص می کند. |
border-image-outset | میزان مشخصی را که منطقه ی تصویر الگو آن را فراتر از box الگو می گذارد را تعیین می کند. |
border-image-repeat | مشخص می کند که آیا تصویر الگو باید تکرار شود، گرد و یا کشیده شود. |
در جلسات قبلی با تعریف استایل border عناصر مختلف آشنا شدیم که فقط می توانستیم یک border ساده با یک رنگ خاص تعریف کنیم، اما با معرفی خصوصیت border-image در CSS امکان تعریف انواع تصاویر به عنوان border و قاب دور عناصر html فراهم شده است.
erfan
سلام وقت بخیر
توضیحان خیلی خلاصه اند و کافی نیست
ممنون از وقتی گذاشتید