جستجو در دورآموز

خانه / وبگاه / ویژگی border-radius در CSS
196 برگشت

ویژگی border-radius در CSS

آرمان اسلامی
آرمان اسلامی

برنامه نویس زبان HTML 5 دانش آموز پایه نهم هستم.

چهارشنبه، 25 تیر 1399 ساعت 14:45:16
 ویژگی  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>

موفق باشید.

جهت برقراری ارتباط با نویسنده پست و یا ارسال نظر اطلاعات زیر را وارد نمایید
تصویر کپچا دورآموز
روژان

خوب بود

سوالات متداول دورآموز