সিএসএস outline প্রোপার্টি
ব্রাউজার সাপোর্ট
| property | Google Chrome | Edge | Mozila Firefox | Safari | Opera |
|---|---|---|---|---|---|
| outline | ১.০ | ৮.০ | ১.৫ | ১.২ | ৭.০ |
সংজ্ঞা ও ব্যবহার
outline হচ্ছে এলিমেন্টকে "লক্ষনীয়" করে তোলার জন্য এলিমেন্টের চারপাশে(বর্ডারের বাহিরে) লাইন অংকন করা।
- outline সংক্ষিপ্ত প্রোপার্টিটির দ্বারা একটি ডিক্লেয়ারেশনের মাধ্যমে আউটলাইন সংক্রান্ত সকল প্রোপার্টি সেট করা হয়।
- outline সংক্ষিপ্ত প্রোপার্টির মাধ্যমে যেসকল প্রোপার্টির ভ্যালু সেট করা যায় সেগুলো হলো: outline-color, outline-style, outline-width ।
- যদি উপরোক্ত যেকোন একটি ভ্যালু পাওয়া না যায়, যেমনঃ "outline:solid #ff0000;" তাহলে বাদ পড়া প্রোপার্টিটির জন্য স্বয়ংক্রিয়ভাবে একটি ডিফল্ট ভ্যালু নিয়ে নিবে।
পরামর্শঃ
- আউটলাইন এলিমেন্টের অংশ না, এছাড়াও এলিমেন্টের width এবং height প্রোপার্টি আউটলাইনের width বা height বহন করে না।
| Initial Value: | Inherited: | Animatable: |
|---|---|---|
| invert none medium | না | হ্যাঁ । আরোও জানতে animatable অধ্যায় ভিজিট করুন। animatableএর উদাহরণ |
সিএসএস সিনট্যাক্স
outline: outline-color outline-style outline-width/initial/inherit;
একটি <p> এলিমেন্টের চারপাশে আউটলাইন নির্ধারণ করি:
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<style>
p {
border: 1px solid orangered;
outline: teal dotted thick;
}
</style>
</head>
<body>
<p><b>নোটঃ</b> যদি !DOCTYPE নির্দিষ্ট করে দেওয়া থাকে তাহলে আউটলাইন প্রোপার্টিটি IE8 সাপোর্ট করবে।</p>
</body>
</html>
ফলাফল
জাভাস্ক্রিপ্ট সিনট্যাক্স
object.style.outline="#0000FF dotted 5px"উদাহরণঃ
<!DOCTYPE html>
<html>
<head>
#myDIV {
border: 1px solid black;
width: 250px;
height: 200px;
}
</style>
</head>
<body>
<p> "উদাহরণ দেখি" বাটনে ক্লিক করলে div এলিমেন্টের মধ্যে আউটলাইন বর্ডারটি দেখা যাবে।</p>
<button onclick="myFunction()">উদাহরণ দেখি</button>
<br>
<div id="myDIV">
<h1>হ্যালো সালেহ</h1>
</div>
<script>
function myFunction() {
document.getElementById("myDIV").style.outline = "teal dotted 5px";
}
</script>
</body>
</html>
ফলাফল
outline প্রোপার্টির ভ্যালু-সমূহ
- outline-color - আউটলাইনের কালার নির্ধারন করে।
- outline-style -আউটলাইনের স্টাইল নির্ধারন করে।
- outline-width -আউটলাইনের প্রস্থ(চওড়া) নির্ধারন করে।
- initial - সিএসএস প্রোপার্টির ডিফল্ট ভ্যালু সেট করে। আরও জানতে initial অধ্যায় ভিজিট করুন।
- inherit - এই প্রোপার্টির ভ্যালু প্যারেন্ট এলিমেন্ট থেকে উত্তরাধিকার সূত্রে পায়। আরও জানতে inherit অধ্যায় ভিজিট করুন।