সিএসএস৩ border-image প্রোপার্টি
সিএসএস৩ border-image প্রোপার্টি দিয়ে একটি এলিমেন্ট এর চারদিকে বর্ডার সেট করতে পারেন।
ব্রাউজার সাপর্ট
টেবিলে উল্লেখিত সংখ্যা ব্রাউজার এর প্রথম ভার্সন যা এই প্রোপার্টি সম্পূর্ণভাবে সাপর্ট করে তা বোঝায়।
-webkit- বা -moz- দ্বারা প্রথম প্রিফিক্স ভার্সন বুঝায় যা এই প্রোপার্টি সাপর্ট করে।
| Property |  |
 |
 |
 |
 |
|---|---|---|---|---|---|
| border-image | 11.0 | 16.0 4.0 -webkit- |
15.0 3.5 -moz- |
6.0 3.1 -webkit- |
15.0 11.0 -o- |
সিএসএস৩ border-image প্রোপার্টি
সিএসএস৩ border-image প্রোপার্টি যেকোন এলিমেন্ট এর চারিদিকে বর্ডার দিয়ার জন্য ব্যবহার করা হয়।
প্রোপার্টিটি নিম্নোক্ত তিনভাবে অংশগ্রহণ করে:
- ইমেজ বর্ডার হিসেবে
- ইমেজ এর যেখানে স্লাইস/ভাগ থাকে
- মাঝ অংশ যেখানে পুনরাবৃত্তি বা প্রসারিত হবে তা নির্দিষ্ট করে
আমরা নিম্নোক্ত ইমেজটি ব্যবহার করবো (border.png)
border-image প্রোপার্টি ছবিটিকে নিয়ে একে নয়টি অংশে স্লাইস/ভাগ করে । ইটি চারটি কর্ণারে বসে এবং এবং মধ্যবর্তী অংশ আপনি যেভাবে চান সেই অনুযায়ী - পুনরাবৃত্তি বা প্রসারিত হয়।
নোট: border-image প্রোপার্টি কাজ করার জন্য এলিমেন্টটির বর্ডার প্রোপার্টি সেট প্রয়োজন হবে।
এখানে ইমেজ এর মধ্যবর্তী অংশের পুণরাবৃত্তি ঘটেছে:
Here, the middle sections of the image are repeated to create the border.
এর কোড হচ্ছে
#borderimg {
border: 10px solid transparent;
padding: 15px;
-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;
}
এখানে মধ্যবর্তী অংশ প্রসারিত হয়েছে:
Here, the middle sections of the image are stretched to create the border.
এর কোড হচ্ছে:
#borderimg {
border: 10px solid transparent;
padding: 15px;
-webkit-border-image: url(border.png) 30 stretch; /* Safari 3.1-5 */
-o-border-image: url(border.png) 30 stretch; /* Opera 11-12.1 */
border-image: url(border.png) 30 stretch;
}
সিএসএস৩ border-image - বিভিন্ন স্লাইস মান
স্লাইস এর বিভিন্ন মান বর্ডার এর চেহারা পাল্টে দেয়
উদাহরণ 01:
border-image: url(border.png) 50 round;
উদাহরণ 02:
border-image: url('http://www.w3schools.com/css/border.png') 20% round;
উদাহরণ 03:
border-image: url(border.png) 30% round;
এর কোড হচ্ছে:
#borderimg1 {
border: 10px solid transparent;
padding: 15px;
-webkit-border-image: url(border.png) 50 round; /* Safari 3.1-5 */
-o-border-image: url(border.png) 50 round; /* Opera 11-12.1 */
border-image: url(border.png) 50 round;
}
#borderimg2 {
border: 10px solid transparent;
padding: 15px;
-webkit-border-image: url(border.png) 20% round; /* Safari 3.1-5 */
-o-border-image: url(border.png) 20% round; /* Opera 11-12.1 */
border-image: url(border.png) 20% round;
}
#borderimg3 {
border: 10px solid transparent;
padding: 15px;
-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;
}
