میخوای وارد بازار کار بشی و محصولات خودت رو بفرشی همین الان ثبت نام کن
0

rounded corners (گرد کردن گوشه ها) در CSS

سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی و فروشگاهی مدرسه کدنویسی ، امیدوارم که حال همه دوستان خوب باشه. لطفا در ادامه با آموزش فرم rounded corners (گرد کردن گوشه ها) در CSS با من همراه باشید.

با استفاده از ویژگی border-radius ، شما میتوانید.  گوشه های عناصر html صفحه وب خود را به میزانی که تعیین می کنید، گرد کنید.

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

این ویژگی اجازه گرد کردن. گوشه های انواع عناصر html ، را به شما می دهد.

مثال : استفاده از ویژگی border-radius برای یک عنصر html با یک رنگ پس زمینه:

 

rounded 1

 

مثال : 
#rcorners1 {
    border-radius: 25px;
    background: #73AD21;
    padding: 20px;
    width: 200px;
    height: 150px;
}

مثال ۲- استفاده از ویژگی border-radius برای یک عنصر html بدون رنگ پس زمینه:

 

rounded 2

 

مثال : 
#rcorners2 {
    border-radius: 25px;
    border: 2px solid #73AD21;
    padding: 20px;
    width: 200px;
    height: 150px;
}

مثال ۳- استفاده از ویژگی border-radius برای یک عنصر html با یک تصویر پس زمینه:

 

 

rounded 3

مثال :

مثال کامل موارد فوق:

مثال : خصوصیت border-radius
#rcorners1 {
    border-radius: 25px;
    background: #73AD21;
    padding: 20px;
    width: 200px;
    height: 150px;
}


#rcorners2 {
    border-radius: 25px;
    border: 2px solid #73AD21;
    padding: 20px;
    width: 200px;
    height: 150px;
}


#rcorners3 {
    border-radius: 25px;
    background: url(paper.gif);
    background-position: left top;
    background-repeat: repeat;
    padding: 20px;
    width: 200px;
    height: 150px;
}

نکته: ویژگی border-radius یک دستور کلی است. که برای گرد کردن تمام گوشه های یک عنصر html ، بکار می رود.

برای گرد کردن یه گوشه از یک عنصر html ، به عنوان مثال . گرد کردن گوشه بالا و سمت راست عنصر ، باید از کد border-top-right-radius استفاده کنید.

 


استفاده از ویژگی border-radius برای گرد کردن سفارشی

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

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

به عنوان مثال در کد border-radius: 15px 50px 30px 5px;  تمام گوشه های یک عنصر html هر کدام به مقداری که تعیین شده ، گرد می شوند.

اما ترتیب آن به این صورت است: گوشه بالا چپ ، بالا راست ، پایین راست ، پایین چپ .

مثال-۱ :

 

rounded 4

مثال :

مثال ۲: در این مثال گوشه های بالاچپ و بالا راست ، به مقداری که تعیین شده گرد می شوند.

اما چون مقدار یک گوشه تعیین نشده، گوشه ی پایین چپ به میزان بالا راست (۵۰px) گرد می شود.

 

rounded 5

مثال :

مثال ۳: در این مثال نیز مقادیر ۱۵px 50px ، به ترتیب برای گوشه های پایین راست و پایین چپ اعمال می شود!

rounded 6

مثال : 

همچنین می توانید ، گوشه های به شکل بیضی ایجاد کنید.

مثال-۴:مقدار تکی border-radius: 15px روی تمام گوشه های عنصر اعمال می شود:

 

rounded 7

 

مثال : کد تمام موارد فوق

شما همچنین می توانید گوشه های بیضوی ایجاد کنید:

مثال : گوشه های بیضوی

 

تمام خصوصیات Rounded (گرد کردن گوشه ها) در CSS

خصوصیتتوضیحات
border-radiusاین خصوصیات تمام حالت های radius یک عنصر را در برمی گیرد.
border-top-left-radiusگرد کردن border گوشه ی بالا و سمت چپ عناصر html
border-top-right-radiusگرد کردن border گوشه ی بالا و سمت راست عناصر html
border-bottom-right-radiusگرد کردن border گوشه ی پایین و سمت راست عناصر html
border-bottom-left-radiusگرد کردن border گوشه ی پایین و سمت چپ عناصر html

 


امیدواریم آموزش rounded corners (گرد کردن گوشه ها) در CSS نیز برای شما مفید واقع شده باشد و ادامه آموزش  آشنایی با css را دنبال کنید . برای مطالعه پست‌ها بیشتر ، ما را در مدرسه کدنویسی تلگرام  و یا در تی جوان اینستاگرام دنبال کنید.

نظراتتون رو زیر همین پست با ما به اشتراک بگذارید.

 

cssrounded corners (گرد کردن گوشه ها) در CSSrounded corners در CSSw3schoolsw3schools فارسیآموزش cssآموزش css از مقدماتی تا پیشرفتهآموزش css به زبان سادهآموزش css پروژه محورآموزش css پیشرفتهآموزش css حرفه ایآموزش css در htmlآموزش css رایگانآموزش css کاملآموزش css مبتدی تا پیشرفتهآموزش css مدرسه کدنویسیآموزش css مقدماتیآموزش css مقدماتی تا پیشرفتهآموزش css و htmlآموزش html css پروژه محور رایگانآموزش html css پیشرفتهآموزش html css مقدماتیآموزش ابتدایی cssآموزش برنامه cssآموزش برنامه نویسی cssآموزش تغییر cssآموزش تگ cssآموزش جامع cssآموزش دستورات cssآموزش زبان cssآموزش ساخت cssآموزش ساده cssآموزش سریع cssآموزش صفر تا صد cssآموزش طراحی وبآموزش طراحی وب با CSSآموزش قدم به قدم cssآموزش کامل css به زبان فارسیآموزش کامل css رایگانآموزش کامل css و htmlآموزش کامل تگ های cssآموزش کد cssآموزش کد های cssآموزش کدهای cssآموزش گام به گام cssآموزش نصب cssاموزش css خارجیاموزش css کلیک سایتاموزش css مبتدیاموزش افکت های cssاموزش انلاین cssاموزش پایه cssاموزش تگ های cssاموزش ساخت منو cssاموزش کدنویسی cssاموزش مقدماتی css pdfدانلود آموزش css به زبان فارسیدانلود آموزش css پیشرفتهساختار دستورات CSSسی اس اسفارسی w3schoolsکتاب آموزش css فارسیگرد کردن گوشه ها در CSS
ارسال دیدگاه

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

×

سلام کاربر عزیز

هر سوالی دارید در این بخش هستیم تا شما رو راهنمائی کنیم

روی لوگومون کلیک کنید

× چطور میتونم کمکتون کنم؟