সিএসএস৩ বর্ডার ইমেজ - Css3 Border Images


সিএসএস3.0 এর border-image প্রপার্টি ব্যবহার করে কোন এইচটিএমএল এলিমেন্টের চারপাশের বর্ডারে কোন ছবি বা image ব্যবহার করা যায়।

নিচে সিএসএস এর border-image প্রপার্টিরএকটি ব্যাবহারিক উদাহরন দেখুন।

এটি সিএসএস 3.0 এর border-image প্রোপার্টির উদাহরন।



border-image প্রোপার্টি

সিএসএস 3.0 এর border-image প্রোপার্টির ব্যবহার করে কোন এইচটিএমএল এলিমেন্টের চারপাশে বর্ডার হিসেবে কোন ছবি বা image নির্ধারণ করা যায়।

border-image, border-image-source, border-image-slice, border-image-width, border-image-outset এবং border-image-repeat প্রপার্টির শর্টহ্যান্ড প্রোপার্টি হল border-image প্রপার্টি

একটি border-image শর্টহ্যান্ড প্রোপার্টির ৩টি অংশ থাকে।

নিচে সিএসএস এর border-image শর্টহ্যান্ড প্রোপার্টির সিনট্যাক্স দেখুন।

সিনট্যাক্স

border-image: url 30 round;

কোড এডিটর


এখানে url বর্ডারে ব্যাবহৃত ছবিটির ঠিকানা বা location নির্ধারণ করে, মাঝের সংখ্যাটি ছবিটি কোথায় স্লাইস হবে তা নির্দেশ করে এবং শেষের অংশটি বর্ডারের মাঝের অংশ প্রসারিত হবে কি না তা নির্ধারণ করে। মাঝের অংসের মান অর্থাৎ border-image-slice প্রপার্টির মান হিসেবে সংখ্যা, শতকরা বা fill, initial বা inherit ব্যবহার করা যায়।

উদাহরণ

#border-example { 
   border: 10px solid transparent;
   padding: 25px;
   -webkit-border-image: url(border.png) 30 round; /* Safari 3.1-5 */
   -o-border-image: url(border.png) 30 round; /* Opera 11-12.1 */
   border-image: url(border.png) 30 round;
}

কোড এডিটর


নোট - কোনো এইচটিএমএল এলিমেন্টে border-image প্রোপার্টি ব্যবহার করতে হলে, প্রথমে ঐ এইচটিএমএল এলিমেন্টে border প্রোপার্টি নির্ধারণ করতে হবে। border-image প্রোপার্টি IE 10 এবং তার পূর্বের সংস্করণ বা version এ সমর্থন বা support করে না।


সকল border-image প্রোপার্টি

প্রোপার্টিমানবর্ণনা
border-image
border-image-source
border-image-slice
border-image-width
border-image-outset
border-image-repeat