آرمان اسلامی

ویژگی border-radius در CSS

مروری بر ویژگی border ویژگی border برای طراحی قالب بر روی تگ های HTML است. شما می توانید با این ویژگی به راحتی قالب تولید کنید.این ویژگی به صورت کلی شامل سه مقدار است:{سبک-رنگ-اندازه}  «نکته: نیازی به رعایت ترتیب نوشتن مقدار ها در ویژگی border نمی باشد.» 

 ویژگی  border-radius در CSS - مدرسه آنلاین دورآموز

مروری بر ویژگی border

ویژگی border برای طراحی قالب بر روی تگ های HTML است.

شما می توانید با این ویژگی به راحتی قالب تولید کنید.این ویژگی به صورت کلی شامل سه مقدار است:{سبک-رنگ-اندازه

مثال:

 border: width style  color;

«نکته: نیازی به رعایت ترتیب نوشتن مقدار ها در ویژگی border نمی باشد.» 

ویژگی border-radius چیست؟؟

با استفاده از ویژگی border-radius  می توان لبه های یک عنصر را گِرد کنید.

این ویژگی به شما کمک می کند که هر جهت از عنصر را به هر مقدار که خواستید گرد کنــــید.

مقادیر ویژگی border-radius

«نکتــه: هر عنصر دارای ۴ جهت ( بالا – راست – پایین و چپ ) می باشد، در ویژگی border-radius مقدار هر عنصر مهم است. هر جهت یک عنصر مقدار گرد شدن عنصر را مشخص می کند.»

  • مقدار length :   این مقدار از واحدهای اندازه گیری مثل (..,px,em) استفاده می کند. مثال:
<style type="text/css">
body{
    border-radius: 10px 20em 30ch 40ex;
}
</style>
  • مقدار  % : در این مقدار شما به جای واحد های اندازه گیری از درصد استفاده می کنید. مثال:
<style type="text/css">
body{
  border-radius: 40% 50% 60% 70%;
}
</style>

نکات کار با ویژگی border-radius

1- اگر 2 عدد بنویسم ، ( مقدار اول برای لبه بالا و پایین – مقدار دوم برای لبه راست و چپ ) استفاده می شود. مثال:

<style type="text/css">
body{
  border-radius:20px 70px;
}
</style>

2- اگر ا عدد بنویسیم ، تمامی لبه های چهار جهت مساوی می شوند. مثال:

<style type="text/css">
body{
 border-radius:20px;
}
</style>

3- برای گرد کردن عکس کافی استـــــــ .مقادیر را مساوی کنید ، از تمامی صفحه استفاده کنید. مثال:

<style type="text/css">
body{
border-radius:100%;
}
</style>

موفق باشید.


آرمان اسلامی-مدرسه آنلاین دورآموز

آرمان اسلامی

برنامه نویس و علاقه مند به زبان های HTML 5 و css و Payton و Bootstrap و#C و تکنولوژی asp.net cor هستم.

آرمان اسلامی با افتخار از هنرجویان مدرسه آنلاین دورآموز می باشد.

این نوشته بر اساس تحقیقات و مطالب فراگرفته شده در در جلسات آموزشی تهیه شده است

پرسش و پاسخ
  • روژان

    خوب بود

    دوشنبه، ۰۳ شهریور ۱۳۹۹ ساعت ۱۳:۲۳:۰۲
نوشته های دیگر این نویسنده

عضوی از دورآموز شو

درخواست مشاوره رایگان می باشد . فقط کافیست شماره همراه خود را ثبت نمایید تا با شما تماس بگیریم

و یا می توانید هم اکنون با شماره 09155143391تماس حاصل نمایید

دورآموزی
شو