বৈশিষ্ট্য outline-offset

বৈশিষ্ট্য outline-offset রূপরেখার প্রান্তিককরণ নির্ধারণ করে - এমন একটি সীমানা যা জায়গা দখল করে না। বৈশিষ্ট্যের মান হিসাবে শতাংশ ছাড়া আকারের জন্য যেকোনো একক ব্যবহার করা যায়। ডিফল্ট মান: 0। একটি ধনাত্মক মান উপাদান থেকে বাইরের দিকে রূপরেখাকে সরে যায়, একটি ঋণাত্মক মান - ভিতরের দিকে।

সিনট্যাক্স

cssসিলেক্টর {
  outline-offset: মান;
}

উদাহরণ . ধনাত্মক মান

রূপরেখা উপাদান থেকে দূরে সরে যায় (এটি একটি পটভূমি দিয়ে হাইলাইট করা হয়েছে):

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

css#elem {
  outline-offset: 5px;
  outline-width: 1px;
  outline-style: solid;
  outline-color: black;
  background-color: #e4f1ed;
  width: 300px;
  height: 100px;
}

Результат:

উদাহরণ . ঋণাত্মক মান

রূপরেখা উপাদানের ভিতরে অবস্থিত:

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

css#elem {
  outline-offset: -10px;
  outline-width: 1px;
  outline-style: solid;
  outline-color: black;
  background-color: #e4f1ed;
  width: 300px;
  height: 100px;
}

Результат:

উদাহরণ . outline + border সহ ঋণাত্মক মান

আপনি এইরকম একটি আকর্ষণীয় প্রভাব তৈরি করতে পারেন (সীমানার মধ্যে সাদা ফাঁকের পুরুত্বের দিকে মনোযোগ দিন, এটি 10px, 14 নয়, কারণ 4px পুরুত্বের outline এর অংশটি গ্রাস করেছে):

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

css#elem {
  outline-offset: -14px;
  outline: 4px solid green;
  border: 4px solid red;
  width: 300px;
  height: 100px;
}

Результат:

আরও দেখুন