সিএসএস3.0 এর border-image প্রপার্টি ব্যবহার করে কোন এইচটিএমএল এলিমেন্টের চারপাশের বর্ডারে কোন ছবি বা image ব্যবহার করা যায়।
নিচে সিএসএস এর border-image প্রপার্টিরএকটি ব্যাবহারিক উদাহরন দেখুন।
এটি সিএসএস 3.0 এর 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-source | ||
border-image-slice | ||
border-image-width | ||
border-image-outset | ||
border-image-repeat |