آموزش HTML5 و CSS3 آموزش border-radius در css | پاسخ وردپرس |

مطالب پیشنهادی برای شما مهمان عزیز

بنام خدا سلام ,

درخدمت شما کاربران وب سایت پاسخ وردپرس هستم با آموزش border-radius در css پس بامن همراه باشید .

آموزش border-radius

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

ویژه گیهای border-radius

این ویژگی از نوع ویژگی های مختصر نویسی برای ویژگی های زیر می باشد که هر کدام از آنها مخصوص یک گوشه عنصر هستند:

[checklist]

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

[/checklist]

border-radius می تواند یک تا چهار مقدار داشته باشد و اگر مقادیر را با استفاده از / از هم جدا کنیم می تواند هشت مقدار بپذیرد.
که در هر سمت اسلش می تواند بین یک تا چهار مقدار وجود داشته باشد.

آموزش border-radius

برای درک بهتر از کدهای زیر هم میتوانید کمک بگیرید

بدون اسلش

اگر چهار مقدار داشته باشد, اولین مقدار مربوط به گوشه بالا سمت چپ, دومین مقدار مربوط به گوشه بالا سمت راست, سومین مقدار مربوط به گوشه پایین سمت راست و مقدار آخر مربوط به گوشه پایین سمت چپ خواهد بود. (جهت ساعتگرد به شما برای بخاطر سپردن ترتیب کمک می کند)

بیشتر بخوانید :
آموزش html5 و css3 جلسه 7 خصوصیات های css

اگر سه مقدار داشته باشد, اولین مقدار مربوط به گوشه بالا سمت چپ, دومین مقدار مربوط به گوشه های بالا سمت راست و پایین سمت چپ, و مقدار آخر مربوط به گوشه پایین سمت راست می باشد.

اگر دو مقدار داشته باشد, اولین مقدار مربوط به گوشه بالا سمت چپ و پایین سمت راست و دومین مقدار مربوط به گوشه های بالا سمت راست و پایین سمت چپ می باشد.

برای روشن شدن این مسئله کدهای اچ تی ام ال (HTML) زیر را وارد ویرایشگر متن خود می کنیم:

همانطور که می بینیم داخل تگ <body> یک تگ <div>حاوی عبارت  border-radius وارد کرده ایم. حال اقدام به تکمیل کدهای سی اس اس (CSS) می کنیم:

کد های css 

همانطور که در کد فوق مشاهده می شود برای تگ <div> یک Property تحت عنوان border-radius علاوه بر دیگر Property ها که پیش از این با آن ها آشنا شدیم قرار داده ایم و مقداری هم که برای آن در نظر گرفته ایم .

بیشتر بخوانید :
آموزش CSS3 آموزش transition در CSS3 | پاسخ وردپرس |

یک مثال دیگه  

کدهای html

همانطور که می بینیم داخل تگ <body> یک تگ <div>حاوی عبارت  border-radius وارد کرده ایم. حال اقدام به تکمیل کدهای سی اس اس (CSS) می کنیم:

کد css 

نتیجه کار به صورت زیر خواهد بود

آموزش border-radius

همواره تعدد رندرهای مرورگرها اثرات خود را بر کدنویسی گذاشته است. برای اینکه کد شما تقریبا در تمامی مرورگرها نمایش داده شود به صورت زیر عمل کنید. لطفا به توضیحات توجه کنید:

بیشتر بخوانید :
آموزش html و css جلسه 9 لیست ها در html | پاسخ وردپرس |

خوب دوستان عزیز این جلسه از آموزش border-radius در css هم به پایان رسید

امید وارم که مفید بوده باشه اگه این آموزش دوست داشتید به دوستان خود توی شبکه های اجتماعی به اشتراک بزارید

تا یکی دیگه از جلسات آموزشی وب سایت پاسخ وردپرس خدا نگهدار

راستی! برای دریافت مطالب جدید در کانال تلگرام یا پیج اینستاگرام یا پیج یوتیوب پاسخ وردپرس عضو شوید.

یک برنامه نویس آزاد که علاقه زیادی به اشتراک گذاری اطلاعات خود با دیگران داردم. همیشه به وردپرس فکر می کنم و عاشق وردپرس هستم. من یک web developer هستم و هدف من آسان کردن ورود سایر دوستان به این شغل جذاب هست. زبان برنامه نویسی محبوب من PHP هست.

لینک کپی شد!

نظر شما در این‌باره چیست؟

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