آموزش خاصیت عنصر border-radius در CSS

در این پست برای شما خاصیت عنصر border-radius را شرح میدهم،خاصیت این عنصر این است که با استفاده از آن میتوانید به تصاویر یا باکس های خودتان خصوصیت گرد شدن گوشه ها رو بدین،که باعث زیباتر شدن سایت و تصاویرتان میشود،مثل تصویر زیر که تماماً از css ساخته شده (با css نوشته شده) و از هیچگونه تصویری استفاده نشده،که این کار باعث لود سریع تر سایت شما میشود،البته این خاصیت در مرورگر Internet Explorer پاینتر از ورژن 8 نشان داده نمیشود...برای یادگیری استفاده از این خاصیت با ما همراه باشید...

برای اینکه این خصوصیت را اعمال کنید باید یه class یا id داشته باشید و یا یه تگ style درست کنید و این عنصر را در آن قرار دهید،به صورت زیر:

<style>

</style>

و بعد از آن کدنویسی را شروع کنید که ما برای این کار از یه id استفاده میکنیم،به شکل زیر:

<style>

#borderradius{background:# aad400; border:1px solid #666; border-radius:15px; width:150px; height:150px;}

</style>

برای اینکه این کد در دیگر مرورگرها نیز نمایش داده شوند به صورت زیر عمل میکنیم (برای استفاده از کدهای زیر هرکدام از آنها را بعد border-radius:15px;  در کد بالا قرار میدیم به شکلی که در پایان قرار دادیم):

برای مرورگر موزیلا (فایرفاکس) :   ;-moz-border-radius:15px

برای مرورگر گوگل کروم :  webkit-border-radius:15px; -

برای مرورگر اُپرا : o-border-radius:15px;  -

برای مرورگر اینترنت اکسپلورر :   ;-ms-border-radius:15px

در کل کد بالا با تمام متعلقاتش به شکل زیر در می آید:

<style>

#borderradius{background:#aad400; border:1px solid #666; border-radius:15px; -moz-border-radius:15px; -webkit-border-radius:15px; -o-border-radius:15px; -ms-border-radius:15px; width:150px; height:150px;}

</style>

و در پایان باید این id ایجاد شده را فراخوانی کنیم که به صورت زیر این کار را انجام میدهیم:

<div id="borderradius"></div>

در ضمن کد border-radius به صورت چهار قسمتی نیز کار میکند،یعنی اگر شما بخواهید فقط یکی از گوشه یا 2 و یا 3 تا از گوشه ها گرد شود میتوانید این کار را به راحتی انجام دهید،کد کلی به صورت زیر خواهد شد:

border-radius:گوشه پایین سمت چپ*گوشه پایین سمت راست*گوشه بالا سمت راست*گوشه بالا سمت چپ;

(علامت * یعنی فاصله بگذارید،به شکل زیر)

border-radius:5px 5px 5px 5px;

در صورتی که سوالی در این باره داشتید در قسمت نظرات عنوان نمایید.