گوشه‌های گرد

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


منابع آموزشی