বৈশিষ্ট্য border-image

বৈশিষ্ট্য border-image সীমানার জন্য ছবি নির্ধারণ করে, এটি border-image-source, border-image-slice, border-image-repeat, border-image-width এবং border-image-outset বৈশিষ্ট্যগুলির জন্য একটি সংক্ষিপ্ত রূপ। এই সংক্ষিপ্ত বৈশিষ্ট্যটি CSS-এ আগে উপস্থিত হয়েছিল এবং তাই এটি আরও বেশি সংখ্যক পুরানো ব্রাউজারে সমর্থিত।

সিনট্যাক্স

cssসিলেক্টর {
  border-image: url(ছবির পথ) অফসেট/প্রস্থ/প্রসারণ পুনরাবৃত্তি;
}

বর্ণনা

আমরা সীমানার জন্য যে ছবিটি প্রয়োগ করতে চাই তা বিশেষভাবে ডিজাইন করা হওয়া উচিত: কোণের জন্য 4টি মিনি ছবি এবং পাশের জন্য 4টি ছবি। এই ধরনের একটি ছবির উদাহরণ:

এই ক্ষেত্রে কেন্দ্রীয় অংশ সাদা রাখা হয়েছে (যেহেতু আমরা চাই না যে এটি এলিমেন্টের পটভূমিতে পড়ে)। কেন্দ্রীয় অংশ পূর্ণ সহ একটি ছবির উদাহরণ:

slice মান ব্রাউজারকে নির্দেশ করে যে ছবির কোন অংশগুলি কোণে যাবে এবং কোনগুলি পাশে যাবে (এবং কোন অংশটি কেন্দ্রীয় হবে)। কোণে যায় 4টি অংশ, পাশে যায় 4টি অংশ এবং একটি অংশ (কেন্দ্রীয়) এলিমেন্টের পটভূমিতে যায় (ঐচ্ছিক, কীওয়ার্ড fill)।

ছবিটি নিম্নলিখিতভাবে টুকরো টুকরো করে "কাটা" হয়: slice মানের জন্য এক থেকে চারটি মান নির্দিষ্ট করা হয়। আসুন একটি উদাহরণ দিয়ে বুঝুন। নিম্নলিখিত মানগুলি নির্দিষ্ট করা যাক: 10 20 30 40 (পিক্সেল px নির্দেশিত হয় না, এটি এই কারণে যে ছবিটি রাস্টার এবং ভেক্টর উভয়ই হতে পারে)। মানগুলি নিম্নলিখিতটি নির্দেশ করে: 10 উপরে থেকে কাটা, 20 ডান থেকে কাটা, 30 নীচে থেকে কাটা, 40 বাম থেকে কাটা। ছবির কোন অংশ বাম উপরের কোণে যাবে? এটি হবে টুকরো: 10 উপরে থেকে, 40 বাম থেকে। ডান উপরের কোণে যাবে 10 উপরে থেকে, 20 ডান থেকে। এবং তাই।

প্রায়শই ছবিটি প্রতিসম হয় (উপরের হীরার মতো) এবং আমাদের কোণে সমান টুকরো কাটতে হবে। এই ক্ষেত্রে, একটি মান নির্দিষ্ট করা হয়, যা সব দিক থেকে একই অফসেট নির্ধারণ করবে। কমলা হীরা কাটতে, আমরা slice-এ 26 নির্দেশ করব (যেহেতু কমলা হীরার আকার 26px বাই 26px)। হলুদ হীরা সীমানার লাইনে পড়বে এবং তাদের সাথে নিম্নলিখিতটি ঘটবে: তারা হয় সম্পূর্ণ ব্লক জুড়ে প্রসারিত হবে বা সীমানা বরাবর পুনরাবৃত্তি হবে (repeat মানের উপর নির্ভর করে):

html<div id="elem"></div>

css#elem {
  border-image-source: url("image.png");
  border-image-slice: 26;
  border-image-repeat: stretch;
  border-style: solid;
  border-width: 26px;
  width: 200px;
  height: 200px;
  background: green;
  margin: 0 auto;
}

Результат:

html<div id="elem"></div>

css#elem {
  border-image-source: url("image.png");
  border-image-slice: 26;
  border-image-repeat: repeat;
  border-style: solid;
  border-width: 26px;
  width: 200px;
  height: 200px;
  background: green;
  margin: 0 auto;
}

Результат:

border-image বৈশিষ্ট্যটি এলিমেন্টের সীমানার প্রস্থ নির্ধারণ করার অনুমতি দেয় না। ব্রাউজার কেবল ইতিমধ্যে থাকা প্রস্থ সহ সীমানা বরাবর ছবিটি প্রসারিত করে। তাই এটি border বৈশিষ্ট্যের মাধ্যমে নির্ধারণ করতে হবে।

পুরানো ব্রাউজার ব্যবহারকারীরা (বা অক্ষম ছবি সহ) border-এ নির্ধারিত স্ট্যান্ডার্ড ফ্রেম দেখতে পাবে, তাই এটির জন্য উপযুক্ত স্টাইল এবং রং নির্ধারণ করা বুদ্ধিমানের কাজ।

মানগুলি

ডিফল্ট মান: none 100%/1/0 stretch (url(ছবির পথ) অফসেট/প্রস্থ/প্রসারণ পুনরাবৃত্তি)।

উদাহরণ . border-image-repeat: মান repeat

html<div id="elem"></div>

css#elem {
  border-style: solid;
  border-width: 26px;
  border-image: url("image.png") 26 repeat;
  width: 200px;
  height: 200px;
  background: green;
  margin: 0 auto;
}

Результат:

উদাহরণ . border-image-repeat: মান stretch

html<div id="elem"></div>

css#elem {
  border-style: solid;
  border-width: 26px;
  border-image: url("image.png") 26 stretch;
  width: 200px;
  height: 200px;
  background: green;
  margin: 0 auto;
}

Результат:

উদাহরণ . border-image-repeat: মান round

বর্তমানে সাধারণ অবস্থায় repeat মান সেট করা আছে, এবং হোভারে - round। লক্ষ্য করুন যে হোভার করার আগে সীমানায় একটি পূর্ণসংখ্যা সংখ্যক হীরা ফিট হয় না, এবং হোভার করার পরে - একটি পূর্ণসংখ্যা সংখ্যক। round এইভাবেই কাজ করে:

html<div id="elem"></div>

css#elem:hover {
  border-image: url("image.png") 26 round;
}
#elem {
  border-style: solid;
  border-width: 42px;
  border-image: url("image.png") 26 repeat;
  width: 200px;
  height: 200px;
  background: green;
  margin: 0 auto;
}

Результат:

উদাহরণ . border-image-repeat: দুটি শব্দ

প্রস্থের জন্য repeat মান এবং উচ্চতার জন্য stretch মান:

html<div id="elem"></div>

css#elem {
  border-style: solid;
  border-width: 26px;
  border-image: url("image.png") 26 repeat stretch;
  width: 200px;
  height: 200px;
  background: green;
  margin: 0 auto;
}

Результат:

উদাহরণ . ছবির প্রস্থ এবং সীমানার প্রস্থের মিল

আমরা মাউস হোভারে border-width বাড়াব, এবং border-image-এর প্রস্থ একই রাখব। হীরাগুলি সম্পূর্ণ সীমানা জুড়ে প্রসারিত হবে:

html<div id="elem"></div>

css#elem:hover {
  border-width: 52px;
}
#elem {
  border-style: solid;
  border-width: 26px;
  border-image: url("image.png") 26 repeat;
  width: 200px;
  height: 200px;
  background: green;
  margin: 0 auto;
}

Результат:

উদাহরণ . border-image-slice

আসুন একটি ভিন্ন ছবি নেওয়া যাক, যেখানে বিভিন্ন টুকরাগুলি সমান নয়:

আসুন নির্দেশ করি যে ছবির কোন অংশগুলি কাটতে হবে - 25% 30% 10% 20%। এটি এইভাবে কাজ করে: 25% - উপরে থেকে অফসেট, 30% - ডান থেকে অফসেট, 10% - নীচে থেকে অফসেট, 20% - বাম থেকে অফসেট। মূলত এই টুকরোগুলি দিয়ে আমরা কোণগুলি কাটছি। উপরের বাম কোণটি হবে ছবির উপরে থেকে 25%, এবং বাম থেকে 20%। উপরের ডান কোণটি হবে ছবির উপরে থেকে 25%, এবং ডান থেকে 30% এবং তাই।

এছাড়াও, যদি আপনি ব্লকের উপর মাউস নিয়ে যান, তাহলে fill কীওয়ার্ডটি সক্রিয় হবে, এবং ছবির কেন্দ্রীয় অংশটি আমাদের ব্লকের পটভূমি হয়ে যাবে:

html<div id="elem"></div>

css#elem:hover {
  border-image: url("image.png") fill 25% 30% 10% 20% stretch;
}
#elem {
  border-style: solid;
  border-width: 52px;
  border-image: url("image.png") 25% 30% 10% 20% stretch;
  width: 200px;
  height: 200px;
  margin: 0 auto;
}

Результат:

উদাহরণ

লিনিয়ার গ্রেডিয়েন্ট ব্যবহার করে একটি গ্রেডিয়েন্ট সীমানা তৈরি করা যাক:

html<div id="elem"></div>

css#elem {
  background: green;
  border-image: linear-gradient(to bottom, red, blue) 30;
  border-width: 30px;
  border-style: solid;
  width: 200px;
  height: 200px;
  margin: 0 auto;
}

Результат:

উদাহরণ . border-image-width

আমরা border-image-width-এর মান 2-এ সেট করব (সীমানার ছবিটি সীমানার নিজের চেয়ে 2 গুণ বড় হয়ে যাবে) যখন এলিমেন্টের উপর মাউস নিয়ে যাওয়া হবে (26/2 - স্ল্যাশের পরে নির্দেশিত, যেখানে 26 হল border-image-slice-এর মান)। লক্ষ্য করুন যে সীমানা নিজে বাড়েনি, কিন্তু সীমানার ছবি - হ্যাঁ, এবং এটি টেক্সটের নীচে চলে যাবে:

html<div id="elem"></div>

css#elem:hover {
  border-image: url("image.png") 26/2 repeat;
}
#elem {
  border-style: solid;
  border-width: 26px;
  border-image: url("image.png") 26 repeat;
  width: 200px;
  height: 200px;
  background: green;
  margin: 0 auto;
}

Результат:

উদাহরণ . border-image-outset

আমরা border-image-outset-এর মান 3-এ সেট করব যখন এলিমেন্টের উপর মাউস নিয়ে যাওয়া হবে। (26/1/2 - দ্বিতীয় স্ল্যাশের পরে নির্দেশিত, যেখানে 26 হল border-image-slice-এর মান, এবং - 1 - border-image-width-এর মান):

html<div id="elem"></div>

css#elem:hover {
  border-image: url("image.png") 26/1/3 repeat;
}
#elem {
  border-style: solid;
  border-width: 26px;
  border-image: url("image.png") 26 repeat;
  width: 200px;
  height: 200px;
  background: green;
  margin: 0 auto;
}

Результат:

আরও দেখুন