کار با گوشه های گرد با border-radius در CSS

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

کار با گوشه های گرد با border-radius در CSS

Free-Learn

گوشه های گرد یا Rounded Corners در CSS

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

یا اصلا ممکنه من بخوام فقط گوشه های سمت راست و چپ از سمت بالا گِرد شوند، که با استفاده از این ویژگی border-radius در CSS به راحتی میتوانیم اینکارو انجام بدهیم.

چند نمونه از گِرد کردن عناصر :

۱
۲
۳
۴

 

نمونه عکس گرد شده :

Free-Learn

کار با گوشه های گرد با Border-Radius در CSS

اگه فری لرن رو در جلسات گذشته و جلسات ابتدایی آموزش قدم به قدم زبان CSS دنبال کرده باشید میدونید که ما در اون جلسات با ویژگی های Padding و همچنین Margin آشنا شدیم.

و اینم یاد گرفتیم که در CSS هر عنصر دارای ۴ جهت کلی می باشد، ( بالا – راست – پایین و چپ ) که ما میتونیم برای هر یک از این جهات استایل تعریف نماییم.

یعنی مثلا میتونیم بگیم گوشه سمت بالا و راست فقط گرد شود و بقیه گوشه ها نمیخواد گرد باشه، یا مثلا بگیم گوشه های پایین و چپ فقط گرد شود و…

حال ما برای مشخص کردن این ۴ جهت باید از دستورات زیر استفاده نماییم :

  • border-top-left-radius : جهت بالا سمت چپ
  • border-top-right-radius : جهت بالا سمت راست
  • border-bottom-right-radius : جهت پایین سمت راست
  • border-bottom-left-radius: جهت پایین سمت چپ

یک مثال از موارد بالا :

امتحان کنید

Free-Learn

خلاصه نویسی ویژگی Border-Radius در CSS

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

خلاصه نویسی برای ۴ جهت عنصر با یک مقدار (یعنی فقط یک مقدار میدیم اونو برای ۴ جهت قرار میده)

امتحان کنید

خلاصه نویسی برای جهات بالا و پایین با استفاده از ۲ مقدار ( مقدار اول برای بالا چپ و پایین راست و مقدار دوم برای بالا راست و پایین چپ )

امتحان کنید

خلاصه نویسی با ۳ مقدار ( مقدار اول برای بالا چپ و مقدار دوم بالا راست و پایین چپ و مقدار سوم برای پایین راست )

امتحان کنید

خلاصه نویسی با ۴ مقدار ( مقدار اول برای بالا چپ و مقدار دوم بالا راست ، مقدار سوم پایین راست و مقدار چهارم پایین چپ )

امتحان کنید

Free-Learn

مثال های بیشتر از گرد کردن عناصر در CSS

مثال شماره ۱ : گرد کردن عکس

امتحان کنید

Free-Learn

دریافت PDF یا پرینت این مطلب