সীমানা ব্যাসার্ধ:
প্রথমত, আপনার বুঝতে হবে যে সীমানা-ব্যাসার্ধের সম্পত্তিটির 2 টি মান লাগে। এই মানগুলি কোণার আকৃতি নির্ধারণ করে চতুর্থ উপবৃত্তের এক্স / ওয়াই অক্ষের রেডিয়াই।
যদি মানগুলির মধ্যে কেবল একটিটি সেট করা থাকে তবে দ্বিতীয় মানটি প্রথমটির সমান। সুতরাং border-radius: xসমতূল্য border-radius:x/x;।
শতাংশের মান
ডাব্লু 3 সি স্পেসকে উল্লেখ করে: সিএসএস ব্যাকগ্রাউন্ডস এবং বর্ডারস মডিউল স্তর 3 সীমানা-ব্যাসার্ধ সম্পত্তি এটি আমরা শতাংশ শতাংশের মানগুলি সম্পর্কে পড়তে পারি:
শতাংশ: সীমান্ত বাক্সের সাথে সম্পর্কিত মাত্রা পড়ুন।
সুতরাং border-radius:50%;উপবৃত্তের র্যাডিটি এইভাবে সংজ্ঞায়িত করুন:
- এক্স অক্ষের রেডিয়ি পাত্রে প্রস্থের 50%
- Y অক্ষের রেডিয়ি পাত্রে উচ্চতার 50%
পিক্সেল এবং অন্যান্য ইউনিট
সীমানা ব্যাসার্ধের জন্য শতাংশের চেয়ে অন্য একটি মান ব্যবহার করা (যেমন, ভিউপোর্ট সম্পর্কিত ইউনিট, সেমি ...) সর্বদা একই এক্স / ওয়াই রেডিয়াসহ একটি উপবৃত্তের ফলস্বরূপ। অন্য কথায়, একটি বৃত্ত ।
আপনি যখন border-radius:999px;বৃত্তের রেডিয়াই সেট করবেন তখন 999px হওয়া উচিত। তবে আরেকটি নিয়ম প্রয়োগ করা হয় যখন বক্ররেখাগুলি বৃত্তের রেডিয়িকে ক্ষুদ্রতম দিকের অর্ধেক আকারে হ্রাস করে ওভারল্যাপ করে। সুতরাং আপনার উদাহরণে এটি উপাদানের অর্ধেক উচ্চতার সমান: 50px।
এই উদাহরণের জন্য (একটি নির্দিষ্ট আকারের উপাদান সহ) আপনি px এবং শতাংশ উভয়ই একই ফলাফল পেতে পারেন। উপাদানটি হ'ল 230px x 100px, উভয় পক্ষের border-radius: 50%;সমান border-radius:115px/50px;(50%):
div {
display: inline-block;
background: teal;
width: 230px;
height: 100px;
padding: 40px 10px;
box-sizing: border-box;
font-family: courier;
font-size: 0.8em;
color: #fff;
}
.percent {
border-radius: 50%;
}
.pixels {
border-radius: 115px/50px;
}
<div class="percent">border-radius:50%;</div>
<div class="pixels">border-radius:115px/50px;</div>
