این آموزش در تاریخ ۱۴۰۲/۰۶/۲۶ آپدیت شده است.
کار با گوشه های گرد با border-radius در CSS
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش کار با گوشه های گرد با border-radius در CSS با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
کار با گوشه های گرد با Border-Radius در CSS
ما در زبان CSS میتونیم با استفاده از ویژگی border-radius گوشه های یک عنصر رو گرد کنیم، یا دایره ای کنیم، مثلا برای دایره ای کردن عکس باید از این ویژگی استفاده کنیم.
اگه سایت آموزشی فری لرن رو در جلسات گذشته دنبال کرده باشید میدونید که من در اون جلسات اشاره کردم که برخی از تگ ها در CSS دارای ۴ جهت ( طرف ) می باشند، که ما میتونیم برای هر یک از این جهت ها استایل تعریف نماییم.
یعنی مثلا میتونیم بگیم فقط گوشه سمت بالا و راست گرد شود و بقیه گوشه ها نمیخواد گرد باشه، یا مثلا بگیم فقط گوشه های پایین و چپ گرد شود و…
حال ما برای مشخص کردن این ۴ جهت باید از دستورات زیر استفاده نماییم :
- border-top-left-radius : بالا سمت چپ
- border-top-right-radius : بالا سمت راست
- border-bottom-right-radius : پایین سمت راست
- border-bottom-left-radius : پایین سمت چپ
مثال شماره ۱ : مشخص کردن ۴ جهت بصورت مجزا
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
.t1{ border-top-left-radius:20px; } .t2{ border-top-right-radius:20px; } .t3{ border-bottom-left-radius:20px; } .t4{ border-bottom-right-radius:20px; } |
مثال شماره ۲ : مشخص کردن فقط گوشه بالا سمت راست و چپ
|
1 2 3 4 |
.t1{ border-top-left-radius:20px; border-top-right-radius:20px; } |
Free-Learn
خلاصه نویسی ویژگی Border-Radius در CSS
خلاصه نویسی یک ویژگی یعنی اینکه دیگه لازم نباشه ما بیایم و برای هر یک از جهت های یک عنصر بصورت جداگانه ویژگی تعریف کنیم و استایل بدیم، فقط یه دستور مینویسیم که همون یه دستور به ۴جهت عنصر استایل بده.
شکل کلی :
|
1 |
border-radius:border-top-left border-top-right border-bottom-left border-bottom-right; |
مثال شماره ۱ : استفاده از ۱ مقدار برای ۴ جهت
- بالا سمت راست
- بالا سمت چپ
- پایین سمت راست
- پایین سمت چپ
|
1 2 3 |
.t1{ border-radius:20px; } |
مثال شماره ۲ : مشخص کردن فقط جهت بالا سمت راست و بالا سمت چپ
- بالا سمت راست
- بالا سمت چپ
|
1 2 3 |
.t1{ border-radius:20px 20px 0 0; } |
مثال شماره ۳ : مشخص کردن فقط جهت پایین سمت راست و پایین سمت چپ
- پایین سمت راست
- پایین سمت چپ
|
1 2 3 |
.t1{ border-radius:0 0 20px 20px; } |
Free-Learn
مثال های بیشتر
مثال شماره ۱ : گرد کردن عکس
|
1 2 3 |
img{ border-radius:50%; } |
