সিএসএস outline-style প্রোপার্টি
ব্রাউজার সাপোর্ট
| property | Google Chrome | Edge | Mozila Firefox | Safari | Opera |
|---|---|---|---|---|---|
| outline-style | ১.০ | ৮.০ | ১.৫ | ১.২ | ৭.০ |
সংজ্ঞা ও ব্যবহার
আউটলাইন এলিমেন্ট হলো এমন একটি লাইন যা এলিমেন্টের চারপাশে অংকন করা হয় এলিমেন্টের "বাহিরে" ব্যবহার করতে ।
outline-style প্রোপার্টির মাধ্যমে আউটলাইনে স্টাইল করা হয়।
পরামর্শঃ
- একটি এলিমেন্টের চারপাশের লাইন-ই হলো আউটলাইন। এটি এলিমেন্টের চারদিকে মার্জিন প্রদর্শন করে। যাইহোক,এটি বর্ডার প্রোপার্টি থেকে ভিন্ন হয়।
- আউটলাইন এলিমেন্ট মাত্রার কোনো অংশ না। অতএব আউটলাইনের width এলিমেন্টের width এবং height প্রোপার্টি নির্ধারন করে না।
| Initial Value: | Inherited: | Animatable: |
|---|---|---|
| none | না | না। আরোও জানতে animatable অধ্যায় ভিজিট করুন। |
সিএসএস সিনট্যাক্স
outline-style: none/hidden/dotted/dashed/solid/double/groove/ridge/inset/outset/initial/inherit;
আউটলাইনের স্টাইল নির্ধারণঃ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<style>
p {
border: 2px solid teal;
outline-style: dotted;
outline-color: orangered;
}
</style>
</head>
<body>
<p><b>নোটঃ</b> যদি !DOCTYPE নির্দিষ্ট করে দেওয়া হয়, তাহলে আউটলাইন প্রোপার্টিটি ইন্টারনেট এক্সপ্লোরার ৮ এ সাপোর্ট করবে।</p>
</body>
</html>
ফলাফল
জাভাস্ক্রিপ্ট সিনট্যাক্স
object.style.outlineStyle="dashed"উদাহরণঃ
<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {
margin: auto;
border: 1px solid coral;
outline: teal solid 5px;
width: 250px;
height: 200px;
}
</style>
</head>
<body>
<p> "উদাহরণ দেখি" ক্লিক করলে div এলিমেন্টের outline-width প্রোপার্টিটি পরিবর্ততিত হবে।</p>
<button onclick="myFunction()">উদাহরণ দেখি</button>
<div id="myDIV">
<h1>হ্যালো ইমরান</h1>
</div>
<script>
function myFunction() {
document.getElementById("myDIV").style.outlineStyle = "dashed";
}
</script>
</body>
</html>
ফলাফল
আরো উদাহরণ
আউটলাইনের স্টাইল নির্ধারনের জন্য বিভিন্ন ভ্যালুর ব্যবহারঃ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<style>
p {
border: 2px solid coral;
outline-color:teal;
}
p.dotted {outline-style: dotted;}
p.dashed {outline-style: dashed;}
p.solid {outline-style: solid;}
p.double {outline-style: double;}
p.groove {outline-style: groove;}
p.ridge {outline-style: ridge;}
p.inset {outline-style: inset;}
p.outset {outline-style: outset;}
</style>
</head>
<body>
<h2> outline-style প্রোপার্টি </h2>
<p class="dotted">একটি ডটেড আউটলাইন </p>
<p class="dashed">একটি ডেসড আউটলাইন </p>
<p class="solid">একটি সলিড আউটলাইন </p>
<p class="double">একটি ডাবল আউটলাইন </p>
<p class="groove">একটি গ্রুভ আউটলাইন</p>
<p class="ridge">একটি রিজ(ridge) আউটলাইন </p>
<p class="inset">একটি ইনসেট আউটলাইন </p>
<p class="outset">একটি আউটসেট আউটলাইন</p>
<p><b>নোটঃ</b> যদি !DOCTYPE নির্দিষ্ট করে দেওয়া হয়, তাহলে আউটলাইন প্রোপার্টিটি ইন্টারনেট এক্সপ্লোরার ৮ এ সাপোর্ট করবে।</p>
</body>
</html>
ফলাফল
outline-style প্রোপার্টির ভ্যালু-সমূহ
- none - কোনো আউটলাইন নির্ধারন করে না। এটা ডিফল্ট ।
- hidden - আউটলাইনকে অদৃশ্য করে।
- dotted - বিন্দু বিন্দু আকৃতির আউটলাইন নির্ধারন করে ।
- dashed - আউটলাইনকে ড্যাশ আউটলাইন নির্ধারন করে।
- solid - সলিড আউটলাইন নির্ধারন করে।
- double -ডাবল আউটলাইন নির্ধারন করে।
- groove - 3D গ্রোভ আউটলাইন নির্ধারন করে। outline-color ভ্যালুর উপর এর প্রভাব নির্ধারন করে।
- ridge - 3D রিজ আউটলাইন নির্ধারন করে। outline-color ভ্যালুর উপর এর প্রভাব নির্ধারন করে।
- inset - 3D ইনসেট আউটলাইন নির্ধারন করে। outline-color ভ্যালুর উপর এর প্রভাব নির্ধারন করে।
- outset - 3D আউটসেট আউটলাইন নির্ধারন করে। outline-color ভ্যালুর উপর এর প্রভাব নির্ধারন করে।
- initial - সিএসএস প্রোপার্টির ডিফল্ট ভ্যালু সেট করে। আরও জানতে initial অধ্যায় ভিজিট করুন।
- inherit - এই প্রোপার্টির ভ্যালু প্যারেন্ট এলিমেন্ট থেকে উত্তরাধিকার সূত্রে পায়। আরও জানতে inherit অধ্যায় ভিজিট করুন।
outline-style প্রোপার্টির ভ্যালু-সমুহের ব্যবহার দেখার জন্য স্ব-স্ব ভ্যালুতে ক্লিক করুন।