گوشه‌های گرد
پرش به ناوبری
پرش به جستجو
با ویژگی border-radius در CSS، می‌توانید به هر عنصری «گوشه‌های گرد» بدهید.[۱]
ویژگی border-radius در CSS
ویژگی border-radius در CSS میزان گرد شدن گوشه‌های یک عنصر را تعریف می‌کند.
نکته: این ویژگی به شما اجازه می‌دهد که به عناصر گوشه‌های گرد اضافه کنید!
در اینجا سه مثال وجود دارد:
- گوشه‌های گرد برای یک عنصر با رنگ پس زمینه مشخص:
- گوشه‌های گرد برای یک عنصر دارای کادر:
- گوشه‌های گرد برای عنصری با تصویر پس زمینه:
در اینجا کد وجود دارد:
مثال
1 #rcorners1 {
2 border-radius: 25px;
3 background: #73AD21;
4 padding: 20px;
5 width: 200px;
6 height: 150px;
7 }
8
9 #rcorners2 {
10 border-radius: 25px;
11 border: 2px solid #73AD21;
12 padding: 20px;
13 width: 200px;
14 height: 150px;
15 }
16
17 #rcorners3 {
18 border-radius: 25px;
19 background: url(paper.gif);
20 background-position: left top;
21 background-repeat: repeat;
22 padding: 20px;
23 width: 200px;
24 height: 150px;
25 }
نکته: ویژگی border-radius در حقیقت یک ویژگی مختصر برای ویژگی هایborder-top-left-radius، border-top-right-radius، border-bottom-right-radius و border-bottom-left-radius است.
ویژگی border-radius در CSS - مشخص کردن هر گوشه
ویژگی border-radius می‌تواند از یک تا چهار مقدار داشته باشد. قوانین به صورت زیر است:
- چهار مقدار - border-radius: 15px 50px 30px 5px; (اولین مقدار به گوشه بالا-چپ اعمال می‌شود، دومین مقدار به گوشه بالا-راست، سومین مقدار به گوشه پایین-راست، و چهارمین مقدار به گوشه پایین-چپ اعمال می‌شود):
- سه مقدار - border-radius: 15px 50px 30px; (اولین مقدار به گوشه بالا-چپ اعمال می‌شود، دومین مقدار به گوشه بالا-راست، و سومین مقدار به گوشه پایین-راست اعمال می‌شود):
- دو مقدار - border-radius: 15px 50px; (اولین مقدار به گوشه بالا-چپ و گوشه پایین-راست، و دومین مقدار به گوشه بالا-راست و گوشه پایین-چپ اعمال می‌شود):
- یک مقدار - border-radius: 15px; (مقدار این ویژگی به تمامی چهار گوشه اعمال می گردد، که موجب می‌شود چهار گوشه به میزان برابر گرد شوند):
در اینجا کد مربوطه قرار دارد:
مثال
1 #rcorners1 {
2 border-radius: 15px 50px 30px 5px;
3 background: #73AD21;
4 padding: 20px;
5 width: 200px;
6 height: 150px;
7 }
8
9 #rcorners2 {
10 border-radius: 15px 50px 30px;
11 background: #73AD21;
12 padding: 20px;
13 width: 200px;
14 height: 150px;
15 }
16
17 #rcorners3 {
18 border-radius: 15px 50px;
19 background: #73AD21;
20 padding: 20px;
21 width: 200px;
22 height: 150px;
23 }
24
25 #rcorners4 {
26 border-radius: 15px;
27 background: #73AD21;
28 padding: 20px;
29 width: 200px;
30 height: 150px;
31 }
همچنین شما می‌توانید گوشه‌های بیضی شکل نیز ایجاد کنید:
مثال
1 #rcorners1 {
2 border-radius: 50px / 15px;
3 background: #73AD21;
4 padding: 20px;
5 width: 200px;
6 height: 150px;
7 }
8
9 #rcorners2 {
10 border-radius: 15px / 50px;
11 background: #73AD21;
12 padding: 20px;
13 width: 200px;
14 height: 150px;
15 }
16
17 #rcorners3 {
18 border-radius: 50%;
19 background: #73AD21;
20 padding: 20px;
21 width: 200px;
22 height: 150px;
23 }
خود را با تمرین‌ها امتحان کنید!
ویژگی های گوشه های گرد در CSS
| ویژگی | توضیحات |
|---|---|
| border-radius | یک ویژگی مختصر برای تنظیم تمامی ویژگی border-*-*-radius |
| border-top-left-radius | شکل کادر در گوشه بالا سمت چپ را تعریف می‌کند |
| border-top-right-radius | شکل کادر در گوشه بالا سمت راست را تعریف می‌کند |
| border-bottom-right-radius | شکل کادر در گوشه پایین سمت راست را تعریف می‌کند |
| border-bottom-left-radius | شکل کادر در گوشه پایین سمت چپ را تعریف می‌کند |
منابع آموزشی