আউটলাইন অফসেট করতে outlineOffset প্রপার্টিটি ব্যবহার করুন। এটি আউটলাইনকে বর্ডার এজের বাইরে আঁকতে দেয়।
জাভাস্ক্রিপ্টে আউটলাইন অফসেট করে বর্ডার এজের বাইরে আঁকতে নিচের কোডটি চালান:
উদাহরণ
<!DOCTYPE html> <html> <head> <style> #box { width: 450px; background-color: orange; border: 3px solid red; margin-left: 20px; } </style> </head> <body> <p>নিচে ক্লিক করুন আউটলাইন অফসেট যোগ করতে।</p> <div id="box"> <p>এটি একটি ডিভ। এটি একটি ডিভ। এটি একটি ডিভ। এটি একটি ডিভ। এটি একটি ডিভ।</p> <p>এটি একটি ডিভ। এটি একটি ডিভ। এটি একটি ডিভ। এটি একটি ডিভ। এটি একটি ডিভ।</p> <p>এটি একটি ডিভ। এটি একটি ডিভ। এটি একটি ডিভ। এটি একটি ডিভ। এটি একটি ডিভ।</p> </div> <br> <button type="button" onclick="display()">আউটলাইন অফসেট সেট করুন</button> <br> <script> function display() { document.getElementById("box").style.outline = "thick solid"; document.getElementById("box").style.outlineColor = "#5F5F5F"; document.getElementById("box").style.outlineOffset = "7px"; } </script> </body> </html>
ব্যাখ্যা: outline-offset আউটলাইন এবং বর্ডারের মধ্যবর্তী দূরত্ব নির্ধারণ করে। ডিফল্ট ০। পজিটিভ মান = বাইরে, নেগেটিভ মান = ভিতরে (বর্ডারের ওপর) আঁকবে। ফোকাস স্টাইলিং-এ ভিজুয়াল স্পেস দেওয়ার জন্য খুব কাজের। শর্টহ্যান্ড outline-এ অফসেট থাকে না, আলাদা প্রপার্টি।