خاصیت border-radius برای گرد کردن گوشه عناصر بکار می رود.با وجود اینکه کلمه border در نام این خاصیت وجود دارد اما نیازی نیست که یک عنصر حتما border داشته باشد تا این خاصیت روی آن اعمال شود. خاصیت های قابل استفاده برای گرد کردن گوشه عناصر عبارتند از :

border-top-left-radius
border-top-right-radius
border-bottom-right-radius
border-bottom-left-radius
border-radius

استفاده از خاصیت اختصاصی برای گرد کردن هر گوشه

خاصیت های اختصاصی می توانند یک یا دو مقدار مطلق(length) یا درصدی (percentage) داشته باشند که هر کدام از این مقادیر برای محاسبه میزان انحنای گوشه عناصر بکار می رود. مقادیر درصدی وابسته به هر دو بعد عنصر (طول و ارتفاع عنصر – width و height  ) می باشند.

خاصیت های اختصاصی می توانند یک یا دو مقدار به شرح زیر داشته باشند :

  • اختصاص یک مقدار مطلق باعث ایجاد یک گوشه کاملا گرد می شود.
  • اگر عنصر کاملا مربع باشد (طول و عرض عنصر کاملا یکسان باشند) ، اختصاص یک مقدار درصدی باعث ایجاد یک گوشه کاملا گرد می شود. در غیراینصورت مرورگر میزان درصد طول و عرض را محاسبه کرده و دو مقدار را به صورت اتوماتیک به خاصیت اختصاص می دهد.
  • در صورت اختصاص دو مقدار ، مقدار اول شعاع افقی بیضی و مقدار دوم شعاع عمودی بیضی است.

 

border-radius-ellipse

 

مثال :

.box{
   width:150px;
   height:150px;
   background:#dfdfdf;
}

#box1{
   border-top-left-radius : 30px;
   border-top-right-radius : 35%;
   border-bottom-right-radius : 40px 20px;
   border-bottom-left-radius : 20px 30%;
}

…

<div id="box1" class="box"></div>

individual-border-radius

حالت کوتاه نویسی border-radius

بسته به نحوه تعریف مقادیر حالت کوتاه نویسی border-radius می تواند بیسار پیچیده و یا بسیار ساده باشد.در این حالت می توان از یک تا هشت مقدار استفاده کرد.

 

استفاده از یک مقدار

در صورت استفاده از یک مقدار برای حالت کوتاه نویسی، این مقدار روی هر چهار گوشه اعمال خواهد شد و یک style یکدست ایجاد خواهد کرد.

 

#box2{
   border-radius: 20px;
}

one-border-radius-shortand

استفاده از دو مقدار

در حالت دو مقداری مقدار اول برای گوشه های top-left و bottom-right و مقدار دوم برای گوشه های top-right و bottom-left اعمال خواهد شد.

مثال :

#box3{
   border-radius: 20px 70px;
}

two-border-radius-shortand

استفاده از سه مقدار

در این حالت مقدار اول برای گوشه top-left ، مقدار دوم برای گوشه های top-right و bottom-left و مقدار سوم برای گوشه bottom-right اعمال می شود.

مثال :

#box4{
   border-radius: 10px 20px 70px;
}

three-border-radius-shortand

استفاده از چهار مقدار

هر مقدار به یک گوشه اختصاص خواهد یافت با شروع از گوشه ی top-left و ادامه در جهت عقربه های ساعت تا رسیدن به گوشه bottom-right.

مثال :

#box5{
   border-radius: 10px 20px 30px 40px;
}

four-border-radius-shortand

استفاده از دو تا هشت مقدار

می توان برای هر یک از شعاع های افقی و عمودی بیضی یک مقدار جداگانه تعریف کرد که در این صورت حداقل دو و حداکثر هشت مقدار برای حالت کوتاه نویسی خواهیم داشت. در این حالت مقادیر شعاع افقی و عمودی باید با یک کاراکتر slash (/) از یکدیگر جدا شوند.

ابتدا باید تمام مقادیر افقی و سپس یک slash و بعد از آن تمام مقادیر عمودی ذکر شوند.نیازی نیست که تعداد مقادیر قبل و بعد از slash برابر باشند.به عنوان مثال می توان سه مقدار افقی قبل از slash و دو مقدار عمودی بعد از slash تعریف کرد.در این حالت تشخیص اینکه چه مقداری به چه گوشه ایی اختصاص دارد دقیقا مشابه چهار حالتی است که قبل از این برای حالت کوتاه نویسی توضیح داده شد.

استفاده از خاصیت های اختصاصی راحت تر است اما حالت کوتاه نویسی کد ما را کوتاه تر می کند.

مثال :

#box6{
   border-radius:20% 10% 40% / 15% 30%;
}

دستور زیر معادل دستور قبل می باشد :

#box6{
   border-top-left-radius:20% 15%;
   border-top-right-radius:10% 30%;
   border-bottom-right-radius:40% 15%;
   border-bottom-left-radius:10% 30%;
}

two-eight-border-radius-shortand

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *