گوشه‌های گرد

از ویکی‌کد، دانشنامهٔ برنامه‌نویسی
پرش به ناوبری پرش به جستجو
Main Page Tutorial
Css-menu.jpg
موارد آموزشی
CSS پیشرفته
۱گوشه‌های گرد
۲کادر تصاویر
۳پس‌زمینه‌ها
۴رنگ‌ها
۵Gradientها
۶سایه‌ها
۷افکت‌های متن
۸قلم‌های وب
۹2D Transforms
۱۰3D Transforms
۱۱Transitions
۱۲انیمیشن‌ها
۱۳Tooltip
۱۴استایل‌دهی تصاویر
۱۵ویژگی object-fit
۱۶دکمه‌ها
۱۷مثال‌های صفحه‌بندی (Pagination)
۱۸ستون‌های متعدد
۱۹رابط کاربری
۲۰متغیرها
۲۱Box Sizing
۲۲Flexbox
۲۳Media Queries
۲۴مثال‌های Media Queries
واکنش‌گرایی
Grid در CSS
مثال‌ها
مرجع‌ها

با ویژگی border-radius در CSS، می‌توانید به هر عنصری «گوشه‌های گرد» بدهید.[۱]

ویژگی border-radius در CSS

ویژگی border-radius در CSS میزان گرد شدن گوشه‌های یک عنصر را تعریف می‌کند.

نکته: این ویژگی به شما اجازه می‌دهد که به عناصر گوشه‌های گرد اضافه کنید!

در اینجا سه مثال وجود دارد:

  1. گوشه‌های گرد برای یک عنصر با رنگ پس زمینه مشخص:
  2. گوشه‌های گرد برای یک عنصر دارای کادر:
  3. گوشه‌های گرد برای عنصری با تصویر پس زمینه:

در اینجا کد وجود دارد:

مثال
 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 شکل کادر در گوشه پایین سمت چپ را تعریف می‌کند


منابع آموزشی