CSS গোলাকার
- পূর্ববর্তী পৃষ্ঠা CSS গণিত ফাংশন
- পরবর্তী পৃষ্ঠা CSS সীমানা ইমেজ
CSS গোলাকার
CSS-এর মাধ্যমে border-radius
প্রতিভা, যার মাধ্যমে কোনও উপাদানের 'রুম্বো' শৈলীকে কার্যকর করা যায়。
CSS border-radius এট্রিবিউট
CSS border-radius
প্রতিভা এলিমেন্টকে কোণের ব্যাস নির্দিষ্ট করে।
সুঝানা:আপনি এই প্রতিভা এলিমেন্টকে বক্ষাঙ্কী করতে পারেন!
এখানে তিনটা উদাহরণ আছে:
1. নির্দিষ্ট পটভূমির রঙ সহ বক্ষাঙ্কী বৈশিষ্ট্যগুলোর এলিমেন্ট:
2. কিনারা সহ বক্ষাঙ্কী বৈশিষ্ট্যগুলোর এলিমেন্ট:
3. পটভূমি ছবি সহ বক্ষাঙ্কী বৈশিষ্ট্যগুলোর এলিমেন্ট:
এটা কোডটা:
উদাহরণ
#rcorners1 { border-radius: 25px; background: #73AD21; padding: 20px; width: 200px; height: 150px; } #rcorners2 { border-radius: 25px; border: 2px solid #73AD21; padding: 20px; width: 200px; height: 150px; } #rcorners3 { border-radius: 25px; background: url(paper.gif); background-position: left top; background-repeat: repeat; padding: 20px; width: 200px; height: 150px; }
সুঝানা:border-radius
প্রতিভা এক্সট্রাকট এটা হল:
border-top-left-radius
border-top-right-radius
border-bottom-right-radius
border-bottom-left-radius
CSS border-radius - প্রতিটি কোণ নির্দিষ্ট করুন
border-radius
প্রতিভা একটা থেকে চারটা মান গ্রহণ করতে পারে। নিয়ম এইভাবে:
চারটা মান - border-radius: 15px 50px 30px 5px;(সবগুলো ক্রমবর্ধমানে ব্যবহার করা হয়: ডান ওপরের কোণ, ডান ওপরের কোণ, ডান নিচের কোণ, ডান নিচের কোণ):
তিনটা মান - border-radius: 15px 50px 30px;(প্রথম মানটা ডান ওপরের কোণের জন্য ব্যবহার করা হয়, দ্বিতীয়টা ডান ওপরের ও ডান নিচের কোণের জন্য ব্যবহার করা হয়, তৃতীয়টা ডান নিচের কোণের জন্য ব্যবহার করা হয়):
দুটা মান - border-radius: 15px 50px;(প্রথম মানটা ডান ওপরের কোণ এবং ডান নিচের কোণের জন্য ব্যবহার করা হয়, দ্বিতীয়টা ডান ওপরের ও ডান নিচের কোণের জন্য ব্যবহার করা হয়):
একটা মান - border-radius: 15px;(এই মানটা চারটি কোণকেও ব্যবহার করা হয়, সবগুলো বক্ষাঙ্কী একইভাবে হয়):
এটা কোডটা:
উদাহরণ
#rcorners1 { border-radius: 15px 50px 30px 5px; background: #73AD21; padding: 20px; width: 200px; height: 150px; } #rcorners2 { border-radius: 15px 50px 30px; background: #73AD21; padding: 20px; width: 200px; height: 150px; } #rcorners3 { border-radius: 15px 50px; background: #73AD21; padding: 20px; width: 200px; height: 150px; } #rcorners4 { border-radius: 15px; background: #73AD21; padding: 20px; width: 200px; height: 150px; }
আপনি একটা অবকাঠামো বক্ষাঙ্কী তৈরী করতেও পারেন:
উদাহরণ
#rcorners1 { border-radius: 50px / 15px; background: #73AD21; padding: 20px; width: 200px; height: 150px; } #rcorners2 { border-radius: 15px / 50px; background: #73AD21; padding: 20px; width: 200px; height: 150px; } #rcorners3 { border-radius: 50%; background: #73AD21; padding: 20px; width: 200px; height: 150px; }
CSS বক্ষাঙ্কী প্রতিভা
প্রতিভা | বর্ণনা |
---|---|
border-radius | চারটি border-*-*-radius এটা সকল বর্তমান রেখা গুলোর সংক্ষিপ্ত প্রতীক। |
border-top-left-radius | ডান উপরের হোল্ডারের আকৃতি নির্ধারণ করে |
border-top-right-radius | ডান উপরের হোল্ডারের আকৃতি নির্ধারণ করে |
border-bottom-right-radius | ডান নিচের হোল্ডারের আকৃতি নির্ধারণ করে |
border-bottom-left-radius | ডান নিচের হোল্ডারের আকৃতি নির্ধারণ করে |
- পূর্ববর্তী পৃষ্ঠা CSS গণিত ফাংশন
- পরবর্তী পৃষ্ঠা CSS সীমানা ইমেজ