border-radius

خاصیت 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  ) می باشند.

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

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

 

 

مثال :

.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>

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

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

 

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

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

 

#box2{
   border-radius: 20px;
}

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

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

مثال :

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

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

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

مثال :

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

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

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

مثال :

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

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

می توان برای هر یک از شعاع های افقی و عمودی بیضی یک مقدار جداگانه تعریف کرد که در این صورت حداقل دو و حداکثر هشت مقدار برای حالت کوتاه نویسی خواهیم داشت. در این حالت مقادیر شعاع افقی و عمودی باید با یک کاراکتر 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%;
}