HTML DOM box-shadow প্রপার্টি একটি এলিমেন্টের ফ্রেমের ভিতরে বা বাইরে শ্যাডো পাওয়া বা সেট করার জন্য ব্যবহৃত হয়।
সিনট্যাক্স
boxShadow প্রপার্টি সেট করার সিনট্যাক্স:
box-shadow: none|h-offset v-offset blur spread color |inset|initial|inherit;
প্রপার্টি মানগুলো নিচে ব্যাখ্যা করা হলো:
| মান | বিবরণ |
|---|---|
| none | এটি ডিফল্ট মান এবং কোনো শ্যাডো দেখায় না। |
| h-offset | শ্যাডো অনুভূমিক অফসেট থেকে কত দূরে থাকবে তা নির্দিষ্ট করে। এটি আবশ্যক মান এবং পজিটিভ মান মানে শ্যাডো বক্সের ডান পাশে থেকে থাকবে, 네가েটিভ মান মানে বাম পাশে থেকে থাকবে। |
| v-offset | শ্যাডো লম্বিক অফসেট থেকে কত দূরে থাকবে তা নির্দিষ্ট করে। এটি আবশ্যক মান এবং পজিটিভ মান মানে শ্যাডো বক্সের নিচে থেকে থাকবে, 네가েটিভ মান মানে উপরে থেকে থাকবে। |
| blur | ব্লার রেডিয়াস নির্দিষ্ট করতে ব্যবহৃত হয়। |
| spread | স্প্রেড রেডিয়াস নির্দিষ্ট করতে ব্যবহৃত হয়। |
| color | শ্যাডোর রঙ নির্দিষ্ট করতে ব্যবহৃত হয়। |
| inset | এটি এলিমেন্টের জন্য শ্যাডোকে বাইরে থেকে ভিতরে আনয়ে। |
| initial | প্রপার্টিকে ডিফল্ট মানে সেট করার জন্য। |
| inherit | পিতামাতা এলিমেন্ট থেকে মান উত্তরাধিকার সূত্রে পাওয়ার জন্য। |
উদাহরণ
<!DOCTYPE html> <html> <head> <style> #DIV1 { height: 100px; width: 100px; box-shadow: 10px 10px 3px orange; } </style> <script> function changeBoxShadow(){ document.getElementById("DIV1").style.boxShadow="1px 10px 10px 10px green"; document.getElementById("Sample").innerHTML="বক্স শ্যাডো এখন পরিবর্তিত হয়েছে"; } </script> </head> <body> <div id="DIV1">This is a sample div</div> <p>নিচের বাটনে ক্লিক করলে উপরের div-এর বর্ডার প্রস্থ পরিবর্তন হবে</p> <button onclick="changeBoxShadow()">বক্স শ্যাডো পরিবর্তন করুন</button> <p id="Sample"></p> </body> </html>
আউটপুট
বক্স শ্যাডো পরিবর্তন করুন বাটনে ক্লিক করলে:
