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

4 سال پیش

امتیاز دهید post

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

در این درس از مجموعه آموزش برنامه نویسی سایت سورس باران، به آموزش حاشیه تصویر CSS3 خواهیم پرداخت.

از ویژگی حاشیه تصویر CSS برای افزودن تصویر زمینه به برخی از عناصر استفاده می شود. برای فراخوانی تصویر صفحه، نیازی به استفاده از هیچ کد HTML نیست. یک نحو نمونه تصویر صفحه به شرح زیر است:

#borderimg {
   border: 10px solid transparent;
   padding: 15px;
}

#borderimg {

border: 10px solid transparent;

padding: 15px;

}

مقادیر معمولاً استفاده شده در زیر نشان داده شده است –

border-image-source

برای تنظیم مسیر تصویر استفاده می شود

border-image-slice

برای برش دادن تصویر شبانه روزی استفاده می شود

border-image-width

برای تنظیم عرض حاشیه تصویر استفاده می شود

border-image-repeat

برای تنظیم تصویر صفحه اصلی به صورت گرد، تکرار شده و کشیده استفاده می شود

مثال

در زیر مثالی آورده شده است که نشان می دهد تصویر به عنوان حاشیه برای عناصر قرار گرفته است

&lt;html&gt;
   &lt;head&gt;
      &lt;style&gt;
         #borderimg1 { 
            border: 10px solid transparent;
            padding: 15px;
            border-image-source: url(/css/images/border.png);
            border-image-repeat: round;
            border-image-slice: 30;
            border-image-width: 10px;
         }
         #borderimg2 { 
            border: 10px solid transparent;
            padding: 15px;
            border-image-source: url(/css/images/border.png);
            border-image-repeat: round;
            border-image-slice: 30;
            border-image-width: 20px;
         }
         #borderimg3 { 
            border: 10px solid transparent;
            padding: 15px;
            border-image-source: url(/css/images/border.png);
            border-image-repeat: round;
            border-image-slice: 30;
            border-image-width: 30px;
         }
      &lt;/style&gt;
   &lt;/head&gt;

   &lt;body&gt;
      &lt;p id = "borderimg1"&gt;This is image boarder example.&lt;/p&gt;
      &lt;p id = "borderimg2"&gt;This is image boarder example.&lt;/p&gt;
      &lt;p id = "borderimg3"&gt;This is image boarder example.&lt;/p&gt;
   &lt;/body&gt;
&lt;/html&gt;

<html>

<head>

<style>

#borderimg1 {

border: 10px solid transparent;

padding: 15px;

border-image-source: url(/css/images/border.png);

border-image-repeat: round;

border-image-slice: 30;

border-image-width: 10px;

}

#borderimg2 {

border: 10px solid transparent;

padding: 15px;

border-image-source: url(/css/images/border.png);

border-image-repeat: round;

border-image-slice: 30;

border-image-width: 20px;

}

#borderimg3 {

border: 10px solid transparent;

padding: 15px;

border-image-source: url(/css/images/border.png);

border-image-repeat: round;

border-image-slice: 30;

border-image-width: 30px;

}

</style>

</head>

<body>

<p id = "borderimg1">This is image boarder example.</p>

<p id = "borderimg2">This is image boarder example.</p>

<p id = "borderimg3">This is image boarder example.</p>

</body>

</html>

خروجی

This is image boarder example.

This is image boarder example.

This is image boarder e

This is image boarder example.

This is image boarder e

منبع.

لیست جلسات قبل آموزش CSS

امتیاز دهید post

نویسنده مطلب saber

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

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

مثال

لیست جلسات قبل آموزش CSS

دیدگاه شما

بدون دیدگاه

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

مثال

لیست جلسات قبل آموزش CSS

دیدگاه شما

برای صرف‌نظر کردن از پاسخ‌گویی اینجا را کلیک نمایید.

بدون دیدگاه