CSS বর্তন-ছবি প্রতিভূতি
- পূর্বপাতা border-end-start-radius
- পরবর্তী পৃষ্ঠা border-image-outset
বিবরণ ও ব্যবহার
border-image অ্যাট্রিবিউট একটি সংক্ষিপ্ত অ্যাট্রিবিউট, যা নিচের অ্যাট্রিবিউটগুলি নির্ধারণ করে:
যদি মান ছাড়া থাকে, তবে তা ডিফল্ট মান নির্ধারণ করা হবে。
উপদেশ:অনুশীলন করুন border-image-* অ্যাট্রিবিউট এবং সুন্দর, অগণিত বাটন তৈরি করুন!
অন্যান্য দেখুন:
CSS3 শিক্ষাক্রম:CSS3 বর্তন
উদাহরণ
চিত্রকে div উপাদানের বর্তনী হিসাবে নির্দিষ্ট করুন:
div
{
-webkit-border-image:url(border.png) 30 30 round; /* Safari 5 */
-o-border-image:url(border.png) 30 30 round; /* Opera */
border-image:url(border.png) 30 30 round;
}
পাতার নিচে আরও উদাহরণ আছে。
CSS 语法
border-image: source slice width outset repeat|initial|inherit;
অ্যাট্রিবিউট মান
| মান | বর্ণনা | পরীক্ষা |
|---|---|---|
| border-image-source | বর্তনীর চিত্রের পথ | |
| border-image-slice | চিত্র বর্তনী ভিতরে সরণ | |
| border-image-width | চিত্র বর্তনীর প্রশস্ততা | |
| border-image-outset | বর্তনী চিত্রক্ষেত্রটি বর্তনীর বাইরে প্রসারিত হবে | |
| border-image-repeat | বর্তনী প্রান্তরস্তর সমানভাবে (repeated) প্রসারিত (rounded) কিংবা সতর্ক করা (stretched) হবে কিনা? | পরীক্ষা |
প্রযুক্তিগত বিবরণ
| ডিফল্ট মান: | none 100% 1 0 stretch |
|---|---|
| প্রত্যক্ষ উত্তরসূরীতা: | no |
| সংস্করণ: | CSS3 |
| JavaScript গণিতশাস্ত্র: | object.style.borderImage="url(border.png) 30 30 round" |
আরও উদাহরণ
- Border-image বাটন
- এই উদাহরণ থেকে দেখা যায় কিভাবে border-image অ্যাট্রিবিউটের মাধ্যমে বাটন তৈরি করা যায়。
ব্রাউজার সমর্থন
টেবিলের সংখ্যা থেকে যে অ্যাট্রিবিউটটির প্রথম ব্রাউজারের সম্পূর্ণ সমর্থন পায় তা উল্লেখ করা হয়েছে。
| Chrome | IE / Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| 16.0 4.0 -webkit- |
11.0 | 15.0 3.5 -moz- |
6.0 3.1 -webkit- |
15.0 11.0 -o- |
- পূর্বপাতা border-end-start-radius
- পরবর্তী পৃষ্ঠা border-image-outset
