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

//

آموزش border-radius

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

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

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

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

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

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

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

آموزش border-radius

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

بدون اسلش

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

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

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

آموزش طراحی قالب html و css جلسه 2
یک آموزش جذاب دیگه!

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

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

کد های css 

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

یک مثال دیگه  

کدهای html

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

آموزش کامل شبه کلاس ها در CSS
یک آموزش جذاب دیگه!

کد css 

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

آموزش border-radius

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

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

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

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

میانگین رتبه 5/5 تعداد رای : 1

نظرات

هیچ دیدگاهی برای این محصول نوشته نشده است.

سبد خرید
در حال بروز رسانی

آموزش‌های ویدیویی جدید یوتیوب رو از دست ندی!

بزن بریــم!